Completely free — you should try it now. Complete design control, supports Grid and Flexbox. Use pre-made React components or build your ownCreate Project
The most primitive building blocks similar to HTML tags. For example, Text, Image, and Box.
Create a consistent and professional-looking design with the help of themes.
Enhance the functionality of your websites with unique layouts, animations, effects, and transformations.
Fine-tune your adaptive design
Select an element or a group of elements on the Layer panel and turn it into a component. Add copies of the components to the page and all the props will be inherited.
Additionally, you can include pre-made blocks like maps, videos, pop-ups, and much more.
Customizing design with breakpoints
Your website is designed to look great on all devices, including tablets and smartphones.
Adding and editing breakpoints
Use your personal breakpoints or select one of the ones already in place.
You decide where to place the elements. Move them wherever you want, or nest them in other elements.
You have the option to format multiple elements at once, move multiple elements around the document, or remove multiple elements from their current position.
Style text as desired, make it bold or italic, turn it into a link or convert it to span, the choice is yours.
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
Get ahead with Quarkly's commitment to innovative frontend coding.
Configuring styles of pseudo-classes hover/active/focus, etc.
To alter how an element appears, for instance in a hover state, activate the "hover" prop and arrange the desired props.
Google Fonts Connection
Use the library of over 990 font families to make your site look more beautiful
From the Quarkly interface, browse the Unsplash image library and select the images you require.
This provides categorized functional and stylistic attributes.
Under this section, you can find element display properties.
Explore text style properties here
Open these settings to configure margins and paddings.
Props in this section help create the backgrounds for the elements.
Here you can adjust borders and border radius.
The element position and z-index settings can be altered here.
This property makes an element change 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
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
With a few clicks, you can quickly import modules from NPM into your component.
Optimize your site to promote it on search engines.
If you want to finish or host your project on your server, there is only one thing you need to do: export it as an archive using a create-react-app project.
Fine-tune elements in the code editor.
Export to Gatsby Project
One of the most popular static site generators, Gatsby, can be the destination for your exported projects.
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 once it's ready. A technical domain will be created automatically for it, for example: https://inspiring-beaver-d128ed.netlify.app.
Modern built-in code editor
The Quarkly editor lets you see all the entities that are present on the page.
You can track issues in the component code and pages with the aid of our debug console.
Tooltips in the code
The editor is here to help with property spelling — just start typing.
Synched pages and code editor
When you make changes to the page, you can see those same edits reflected in the code.
Take advantage of the Quarkly collaboration tool: work on a project together with your teammates, just send them an invite.
Any element can serve as a tag. Simply select the "as" property value you require.
In the code editor, you can add attributes to elements as necessary.
The "Image" element features a separate property.
This feature helps you to install unique icons for all devices.
Open graph and meta tags
These settings will help your site display correctly on social networks and in search engines.
Make sure your site's URLs are human-readable to improve search engine optimization.
Robots.txt and sitemap.xml
These files are created automatically, but you can edit them as you see fit.
We provide Quarkly for free as long as we can, and then the lowest price among competitors.Create project