Get all the power of graphic design tools and website builders. Complete design control, supports Grid and Flexbox. All-in-one website builder on React — QuarklyCreate Project
Basic components which are similar to HTML tags like Text, Image, Box, and others.
Build a professional-looking design using themes
Make your website unforgettable with creative layouts, dynamic animations, and exciting transformations.
Fine-tune your adaptive design
You can create reusable components from any selection of elements on the page or in a layer. When you add the component to a page, it inherit all of its original properties.
Add ready-made blocks: maps, videos, pop-ups, and many more
Customizing design with breakpoints
You can make sure your site is mobile-friendly by designing different solutions for elements at breakpoints.
Adding and editing breakpoints
Choose from the preset breakpoints or use your own.
The choice is yours on how to arrange elements on the page — nest them, move them, or drop them in the desired area.
You can drag and drop multiple elements to a different location, remove them, or change their styles while they are selected.
You can apply any style, make a portion of the text bold or italic, a link or span, or any other formatting.
Quickly traverse the hierarchy of elements by double clicking, and hold Ctrl/Cmd to delve into it.
Support of Flexbox and Grid
Quarkly supports the most modern methods of frontend coding.
Configuring styles of pseudo-classes hover/active/focus, etc.
To change the appearance of an element, for example, the way it behaves on hover, just enable "hover" and set up the desired props.
Google Fonts Connection
Connecting fonts from a library with more than 990 font families will help your website design express the personality of your brand.
Browse Unsplash's collection of free images and choose directly from the Quarkly interface.
Here you will find categorized style and functional properties.
Here you can change the way elements appear.
To find the text style properties, go to this section.
To set margins and paddings, open these settings.
The section contains props that enable you to set element backgrounds.
The properties for borders and border radius can be found here.
This category lets you fine-tune element position and z-index settings.
The smooth movement from one state to another for an element is enabled by this property.
This property lets you transform the element, for example, zoom or rotate.
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.
The pages are written in JSX code typical for React.js.
Hot import from NPM
It has never been simpler to import modules from NPM into your component.
Optimize your site to promote it on search engines.
Simply export it as an archive using a create-react-app project if you need to finish or host your project on your own server.
Fine-tune elements in the code editor.
Export to Gatsby Project
With just a few clicks, export your projects to Gatsby, a well-known static site generator.
Pushing commits to your GitHub repository
Want to create a GitHub repository for your project and commit changes there? Piece of cake!
Publication on Netlify
When your site is ready, publish it on Netlify. It'll have a technical domain, for example: https://inspiring-beaver-d128ed.netlify.app.
Modern built-in code editor
All of the page's entities are visible in the editor.
Errors in the component code or pages can be tracked by viewing the debug console.
Tooltips in the code
If you need help when spelling a property, start typing and the editor will auto-complete what you've written.
Synched pages and code editor
Whatever changes you make to the pages, they all will be displayed in the code and vice versa.
Send your coworkers an invitation to collaborate with you on a project using the Quarkly collaboration tool.
Each and every component can behave as a tag. Just choose the needed value of the “as” property.
You can add necessary attributes to elements in the code editor.
A special property of the “Image” element.
This feature helps you install unique icons for all devices and individual tile background color for Windows 10.
Open graph and meta tags
Your site will display appropriately thanks to these settings on social media and search engines.
Make sure your site's URLs are human-readable to improve search engine optimization.
Robots.txt and sitemap.xml
These files are automatically created. But you can edit them if necessary.
We provide Quarkly for free as long as we can, and then the lowest price among competitors.Create project