Publish your website online or export it to Github. Get all the power of graphic design tools and website builders. Create your website from scratch or ready-to-use templatesCreate Project
Text, Image, Box — the most basic components similar to HTML tags.
It's simple to give your website a unified look with themes.
Now your website will be noticed! Use our unique animations, catchy layouts, and transformations.
Fine-tune your adaptive design
Any combination of elements on the page or in a layer can be used to create reusable components. The component inherits all of its original properties when you add it to a page.
Add maps, videos, pop-ups, and more to your site with ready-made blocks.
Customizing design with breakpoints
Your site works perfectly on mobile devices by using different design solutions for elements at breakpoints.
Adding and editing breakpoints
You can use your own custom breakpoints, or select one of the existing ones.
You decide where to place the elements. Move them wherever you want, or nest them in other elements.
You can apply styles to multiple elements at once and move them around, as well as remove them.
Style text as desired, make it bold or italic, turn it into a link or convert it to span, the choice is yours.
You can go up and down the hierarchy of elements using the double click. If you want to dive into the hierarchy, on Windows hold down the Ctrl key and on MacOs the Cmd key.
Support of Flexbox and Grid
Get ahead with Quarkly's commitment to innovative frontend coding.
Configuring styles of pseudo-classes hover/active/focus, etc.
Activate the "hover" prop and set up the desired props to change how an element appears, for example, in a hover state.
Google Fonts Connection
Let your website design express your brand's personality by connecting fonts from a library with more than 990 font families.
Use Unsplash, one of the most popular free image stocks that provide images you can use directly without downloading.
Make use of organized and categorized style and functional properties to improve your project.
This section lets you control how elements appear.
Browse text style properties in this section
To set margins and paddings, open these settings.
Props for element backgrounds can be found in this section.
Here you can adjust borders and border radius.
Customize element position and z-index through these settings in this category.
This property makes an element move smoothly from one state to another.
Use this property to seamlessly transform your element, for example, by rotating or zooming.
Create custom React components using the code editor
With the Quarkly code editor, you can create unique React components and then place them on 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 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
Making a GitHub repository for your project and committing changes can be done with ease.
Publication on Netlify
Once your site is ready, you can publish it on Netlify with a technical domain name like https://inspiring-beaver-d128ed.netlify.app.
Modern built-in code editor
The editor shows each and every entity that is present on the page.
Our debug console will help you track errors in the component code and pages.
Tooltips in the code
If you don't know exactly how to spell a property, start typing and the editor will help you.
Synched pages and code editor
Changes made to a page are reflected in the code and vice versa.
Make use of the Quarkly collaboration tool by inviting your teammates to work on a project with you.
Component-to-tag transformation made simple with the right "as" property value selection.
In the code editor, you can add attributes to elements as necessary.
The "Image" element has a distinct property for this.
Set up exclusive icons for various devices and individual tile background color for Windows 10.
Open graph and meta tags
These settings will help your website look its best on social networks and in search engines.
Clean URLs will help you improve your site's SEO.
Robots.txt and sitemap.xml
These files are created automatically. But you can edit them the way you like.
We provide Quarkly for free as long as we can, and then the lowest price among competitors.Create project