Web page builder for full stack coders.
Meet Quarkly.
Completely free — you should try it now. Use pre-made React components or build your own. Unlimited customisation possibilities, no-code tools of a classic editor
Create Project
Full control over the design.
Primitives
Text, Image, Box — the most basic components similar to HTML tags.
Themes
Create a professional-looking design easily by using themes.
Extended Styling
Make your websites more useful by adding original layouts, animations, effects, and transformations.
Adaptive design
Fine-tune your adaptive design
Components
Make a component out of a single element or a collection of elements on the page or in the Layers panel. All of the props will be inherited by component copies that are added to the page.
Ready-made Content
Add maps, videos, pop-ups, and more to your site with ready-made blocks.
Customizing design with breakpoints
Different design solutions will be used for elements at breakpoints as your website automatically adapts to different screen sizes.
Adding and editing breakpoints
You can change current breakpoints in the project theme or add new ones.
Drag'n'Drop
Element placement options include dragging and dropping, nesting, and arranging them however you like on the page.
Multiselect
You have the option to format multiple elements at once, move multiple elements around the document, or remove multiple elements from their current position.
Text editor
You can make parts of your text bold or italic, or turn them into links. The font face, size, and color are also up to you.
Deep select
Click twice to go up and down the hierarchy of elements. If you need to get inside the hierarchy, hold down Ctrl on Windows or Cmd on MacOs.
Support of Flexbox and Grid
At Quarkly, we support the latest and greatest in frontend coding.
Configuring styles of pseudo-classes hover/active/focus, etc.
By activating the "hover" prop and positioning the desired props, you can change how an element appears, for example in a hover state.
Google Fonts Connection
Make your website look more vibrant by using fonts from a library with over 990 font families.
Unsplash images
Quarkly is integrated with Unsplash, a high-quality image stock that makes it easy to find and use great photos.
Props panel
Make use of organized and categorized style and functional properties to improve your project.
Layout
This section lets you control how elements appear.
Typography
You can change text styles by using special properties in this section.
Indents
You can modify the padding and margins in these settings.
Background
Props for setting up element backgrounds can be found in this section.
Borders
Here you can configure border and border radius.
Position
This category contains settings for configuring the position and z-index of elements.
Transition
This property makes an element move smoothly from one state to another.
Transform
You can use this property to transform the element, for example, rotate or zoom.
Development capabilities.
Supercharged.
Create custom React components using the code editor
In the Quarkly code editor, you can create your own React components and then add them to the page.
React.js
The pages are written in JSX code typical for React.js.
Hot import from NPM
Importing modules to your component from NPM has never been easier.
SEO
Optimize your site to promote it on search engines.
Export CRA
You can export your project as an archive using a create-react-app project if you want to finish it or host it on your server.
Code Editor
Fine-tune elements in the code editor.
Export to Gatsby Project
Your projects can be easily exported to Gatsby, a well-liked static site generator.
Pushing commits to your GitHub repository
You can create a GitHub repository for your project and commit changes.
Publication on Netlify
Publish your website to Netlify once it is complete. Its technical domain name will be generated automatically.
Modern built-in code editor
The Quarkly editor contains all of the page's entities.
Debugger
Errors in the component code or pages can be tracked by viewing the debug console.
Tooltips in the code
If you have doubts about how to spell a property, start typing, and the editor will auto-complete what you're writing.
Synched pages and code editor
All changes made to the pages are displayed in the code and vice versa.
Stunning opportunities for business.
Collaboration
Work on projects with your teammates using the Quarkly collaboration tool, just send them an invite.
Semantic tags
Every component has the ability to act like a tag. Simply select the necessary value for the "as" field.
Schema.org
In the code editor, you can provide items the required characteristics.
Image ALT
A unique attribute that belongs to the "Image" element.
Favicons
Set up unique Windows tile background colors and exclusive icons for multiple devices.
Open graph and meta tags
Use these settings for the correct display of your site on social networks and in search engines.
User-friendly URL
Create user-friendly URLs to boost the usability of the resource and the ranking of your site in the search engines.
Robots.txt and sitemap.xml
These files are created automatically, but you can edit them as you see fit.
Web page builder for full stack coders.
Try it for free.
We provide Quarkly for free as long as we can, and then the lowest price among competitors.
Create project