Publish your website online or export it to Github. Choose from one of many pre-made blocks. Get all the power of graphic design tools and website buildersCreate Project
Primitive content components work like HTML tags. For example, Text, Image, and Вох.
Build a consistent design using themes
With stylish animations, effects, and transformations, you can make your web page more exciting.
Fine-tune your adaptive design
On the Layer panel, choose the element or group of elements you want to convert to a component. All of the props will be inherited if you add duplicates of the components to the page.
Add ready-made blocks: maps, videos, pop-ups, and many more
Customizing design with breakpoints
Make sure your website is perfectly adapted to all devices by using design solutions for elements and breakpoints.
Adding and editing breakpoints
In the project theme, you can modify already-existing breakpoints or add new ones.
You can place elements wherever you want on a page — that's up to you. You can drop them in the desired area, or nest them in other ones.
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 make parts of your text bold or italic, or turn them into links. The font face, size, and color are also up to you.
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
Advanced frontend coding is at the forefront of Quarkly's approach.
Configuring styles of pseudo-classes hover/active/focus, etc.
Transform the appearance of an element, including its hover behavior, by turning on "hover" and adjusting the desired properties.
Google Fonts Connection
By incorporating fonts from a collection of more than 990 font families, you can give your website design more expression.
Unsplash is a popular free image stock. You can search and select images directly from the Quarkly interface.
Take advantage of the categorized style and props.
This is where you can locate element display properties.
To change text styles, use special properties in this section
Configure margins and paddings using 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 allows you to position elements and set their z-index values.
This property makes an element move smoothly from one state to another.
This property can be used to rotate or zoom the element, for example.
Create custom React components using the code editor
Custom React components can be made in Quarkly's code editor and then inserted onto the page.
The pages are written in JSX code typical for React.js.
Hot import from NPM
Quickly import modules to your component from NPM when needed.
Optimize your site to promote it on search engines.
There is just one thing to do if you want to finish or host your project on your server: export it into an archive with a create-react-app project!
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
If you'd like to keep track of your changes, you can create a GitHub repository and commit them.
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
You can monitor all the entities on the page in the Quarkly editor.
Use our debug console to track errors in the component code and pages.
Tooltips in the code
As you type, the editor will suggest possible matches to the property you're looking for.
Synched pages and code editor
The pages and code maintain a dynamic relationship, showing any modifications made in both.
Check out the Quarkly collaboration tool: send an invite to your teammates to work on a project with them.
Any element can serve as a tag. Simply choose the required "as" property value.
You can set desired attributes to elements in the code editor.
This is an individual property that belongs to the “Image” element.
Customize your device icons and set individual tile background color on Windows 10.
Open graph and meta tags
These settings will help your website look its best on social networks and in search engines.
This feature allows you to set user-friendly page URLs.
Robots.txt and sitemap.xml
You can further change these automatically generated files.
We provide Quarkly for free as long as we can, and then the lowest price among competitors.Create project