Complete design control, supports Grid and Flexbox. Use pre-made React components or build your own. Unlimited customisation possibilities, no-code tools of a classic editorCreate Project
The most primitive building blocks similar to HTML tags. For example, Text, Image, and Box.
Using themes you can create a consistent design for your site
Bring life into your web page with stylish animations, effects, 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.
Take advantage of the ready-made blocks such as maps, videos, pop-ups, and more
Customizing design with breakpoints
Your website will automatically adjust to different screen sizes, with different design solutions for elements at breakpoints.
Adding and editing breakpoints
You can add custom breakpoints or edit existing ones in the project theme.
You can align or stack elements however you want and drop them on any area of the page, or nest them in other elements.
You can select multiple elements and apply formatting to them, drag them to another spot in the document, or remove them from their current location.
You can edit part of the text making it bold or italic, turning it into a link or converting to span, as well as appyling any style to it.
With the double click, you can go up and down the hierarchy of elements. If you need to get inside the hierarchy, hold down the Ctrl key on Windows and the Cmd key 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.
To change the element appearance, for example, the way it behaves on hover, enable "hover" and apply the desired props.
Google Fonts Connection
Make your website design more expressive by connecting fonts from a library with more than 990 font families.
Make use of Unsplash, one of the most popular free image stocks where you can select images directly from the Quarkly interface
Take advantage of the categorized style and functional props.
In this section, you can configure element display properties.
Here you'll find text style properties that can be applied to your text.
Here you can configure margins and paddings, which control the space around elements.
This section contains props that help you create element backgrounds.
Here you can adjust borders and border radius.
This category lets you use position and z-index settings.
This property makes it possible for elements to move smoothly from one state to another.
You can transform the element using this property, for instance, rotate or zoom.
Create custom React components using the code editor.
You can create your own React components using the Quarkly code editor and then add them to the page.
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.
Optimize your site to promote it on search engines
You can export a create-react-app project into an archive file that you can host on your own server.
Fine-tune elements in the code editor
Export to Gatsby Project
In no time, you can export your projects to Gatsby — one of the best open-source SSGs
Pushing commits to your GitHub repository
You can store your project in a GitHub repository and make changes to it.
Publication on Netlify
Publish your site on Netlify when it's ready. A technical domain will be generated automatically, for instance: https://inspiring-beaver-d128ed.netlify.app.
Modern built-in code editor
In the Quarkly editor, you can monitor all the entities that are present on the page.
Use our debug console to track errors in the component code and pages.
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
When you make changes to the page, you can see those same edits reflected in the code.
Work together as a team
Check out the Quarkly collaboration tool: send an invite to your teammates to work on a project with them.
Each and every component can behave as a tag. Just choose the needed value of the “as” property.
You can set attributes to elements in the code editor.
This is a separate property of the “Image” element.
This feature allows you to install icons for all devices and change the background color of individual tiles in Windows 10.
Open graph and meta tags
These settings will help your site display correctly on social networks and in search engines.
It's a good idea to use human-readable URLs to improve your site's 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