Get all the power of graphic design tools and website builders. Complete design control, supports Grid and Flexbox. Unlimited customisation possibilities, no-code tools of a classic editorCreate Project
Basic elements that resemble HTML tags: Text, Image, Box, and others.
Themes make it easy to give your website a unified appearance.
Make your site stand out from the crowd with eye-catching layouts, animations, and transformations.
Fine-tune your adaptive design
You can choose an element (or a group of elements) on the page and convert them into a component. Add copies to the page and they will inherit all the props.
To improve your website, use the pre-made blocks, which include videos, pop-ups, maps, and more.
Customizing design with breakpoints
Guarantee a 100% adaptive website by using design solutions that cater to elements at breakpoints.
Adding and editing breakpoints
You have an opportunity to use breakpoints of the project theme or download your own ones.
Have complete control over arranging elements on the page — drop them, nest them, or move them to your desired location.
Use the multi-select feature to apply styles, move, remove, or perform other actions on multiple elements.
If needed, you can change part of the text into bold or italic, link or convert it to span, or edit its style.
If you need to go up and down the hierarchy of elements, double-click them. If you want to dive into the hierarchy, hold down the Ctrl key on Windows and the Cmd key on MacOs.
Support of Flexbox and Grid
Here at Quarkly, we support the most advanced approaches to frontend coding.
Configuring styles of pseudo-classes hover/active/focus, etc.
To change the appearance of an element, for example, its hover behavior, enable the "hover" prop and apply any desired additional props.
Google Fonts Connection
Make your website design more expressive by connecting fonts from a library with more than 990 font families.
Unsplash is one of the most trending free image stocks. Browse its collection and choose images directly from the Quarkly interface.
Enjoy categorized style and functional properties.
Check out this section to use element display properties.
To change text styles, use special properties in this section
Adjust margins and paddings with ease in these settings.
This section has props you can use to set up element backgrounds.
Borders and border radius can be set up here.
You can change the element position and z-index settings in this category.
This property makes an element move smoothly from one state to another.
This property gives you the power to transform your element in a variety of ways, like rotating or zooming.
Create custom React components using the code editor
Create your own React components in the Quarkly code editor and seamlessly integrate them into the page.
The pages are written in JSX code typical for React.js.
Hot import from NPM
Modules from NPM can be imported into your component.
Optimize your site to promote it on search engines.
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.
Fine-tune elements in the code editor.
Export to Gatsby Project
You can easily export your projects to Gatsby, a popular static site generator.
Pushing commits to your GitHub repository
Create a GitHub repository for your project and make commits with ease.
Publication on Netlify
Publish your ready site on Netlify to receive a technical domain name, such as https://inspiring-beaver-d128ed.netlify.app.
Modern built-in code editor
In the Quarkly editor, you can find all the entities of the page.
Use our debug console to track errors in the component code and pages.
Tooltips in the code
Don't let spelling uncertainties hold you back — start typing and the editor will guide you.
Synched pages and code editor
The code and the pages are merged, so your changes to the code are visible in the page and vice versa.
Collaborate with your team on a project using Quarkly. Just send them an invite and get to work!
Each and every component can behave as a tag. Just choose the needed value of the “as” property.
You can provide elements the appropriate characteristics in the code editor.
A special property of the “Image” element.
Set up custom icons for all devices and individual tile background color for Windows 10.
Open graph and meta tags
Get the right display for your website in search engines and social media through these settings.
You may increase the SEO of your site by using clean URLs.
Robots.txt and sitemap.xml
These files are automatically produced. But you are free to change them as you choose.
We provide Quarkly for free as long as we can, and then the lowest price among competitors.Create project