Publish your website online or export it to Github. Complete design control, supports Grid and Flexbox. Unlimited customisation possibilities, no-code tools of a classic editorCreate Project
Fundamental building blocks resembling HTML tags, such as Text, Image, and Box.
Themes make it easy to give your website a unified appearance.
Add some flash to your web pages with stylish animations, effects, 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 premade blocks, including videos, pop-ups, maps, and more.
Customizing design with breakpoints
Ensure your website is fully responsive by using tailored design solutions for elements at breakpoints.
Adding and editing breakpoints
Use your personal breakpoints or select one of the ones already in place.
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 to set their styles, drag'n'drop them to another place, remove, etc.
You can change the appearance of text — for instance, making it bold or italic, turning it into a link, or converting it to a span—as well as apply any style to it.
Double clicking allows you to move up and down the element hierarchy, while holding Ctrl/Cmd lets you access deeper levels.
Support of Flexbox and Grid
We're thrilled to provide you with the top frontend coding techniques available.
Configuring styles of pseudo-classes hover/active/focus, etc.
By activating the "hover" prop and positioning the desired props, you can change how an element appears, for example in a hover state.
Google Fonts Connection
Make your website look more vibrant by using fonts from a library with over 990 font families.
Unsplash is one of the most popular free image stocks. Search and select images directly from the Quarkly interface
Make use of the categorized style and props to your advantage.
Check out this section to use element display properties.
To alter the appearance of your text, use the properties in this section.
To configure margins and paddings, open these settings.
This section has props you can use to set up element backgrounds.
Here you can set up borders and border radius.
Customize element position and z-index through these settings in this category.
This property makes an element transition smoothly from one state to another.
You can use this property to transform the element, for example, rotate or zoom.
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
If necessary, quickly import modules into your component through NPM.
Optimize your site to promote it on search engines.
Simply export it as an archive using a create-react-app project if you need to finish or host your project on your own server.
Fine-tune elements in the code editor.
Export to Gatsby Project
Your projects can be easily exported to Gatsby, a well-liked static site generator.
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
When your site is complete, publish it on Netlify for an automatically generated technical domain, like 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
Don't let spelling uncertainties hold you back — start typing and the editor will guide you.
Synched pages and code editor
The pages and code maintain a dynamic relationship, showing any modifications made in both.
Work on projects with your teammates using the Quarkly collaboration tool, just send them an invite.
Component-to-tag transformation made simple with the right "as" property value selection.
In the code editor, you can assign necessary attributes to elements.
This is an individual property that belongs to the “Image” element.
This feature helps you to install unique icons for all devices.
Open graph and meta tags
Use these settings for the correct display of your site on social networks and in search engines.
You may create user-friendly page URLs with this capability.
Robots.txt and sitemap.xml
These files are there for you to use. But you can change them and add to them as you see fit.
We provide Quarkly for free as long as we can, and then the lowest price among competitors.Create project