Use pre-made React components or build your own. Unlimited customisation possibilities, no-code tools of a classic editor. Get all the power of graphic design tools and website buildersCreate Project
Fundamental building blocks resembling HTML tags, such as Text, Image, and Box.
Themes make it easy to give your website a unified appearance.
Now your website will be noticed! Use our unique animations, catchy layouts, and transformations.
Fine-tune your adaptive design
Transform an element or group of elements on the page or Layer panel into a component. Add copies to the page and they will inherit all properties.
Make your page come alive with ready-made blocks like maps, videos, pop-ups, and many more.
Customizing design with breakpoints
Rest assured your site is completely mobile-friendly by using different design solutions for elements at breakpoints.
Adding and editing breakpoints
You can create, edit, or delete custom breakpoints 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.
Take control of multiple elements by selecting them and setting styles, moving, deleting, or doing more.
You can bold or italicize part of the text; turn it into a link or a span; or apply any other style to it.
Double-click the elements to move up and down in their hierarchical order. Hold down the Ctrl key on Windows or the Cmd key on Mac OS to descend into the hierarchy.
Support of Flexbox and Grid
Quarkly supports the most modern methods of frontend coding.
Configuring styles of pseudo-classes hover/active/focus, etc.
To make an element appear differently, such as with a hover state, enable the "hover" prop and configure the desired props.
Google Fonts Connection
By incorporating fonts from a collection of more than 990 font families, you can give your website design more expression.
Make use of Unsplash, one of the most popular free image stocks where you can select images directly from the Quarkly interface
Here you will find categorized style and functional properties.
You can find the element display properties under this section.
You can apply the text style properties found here to your text.
To configure margins and paddings, open these settings.
The section contains props that enable you to set element backgrounds.
With these options, you can set up borders and border radius.
The element position and z-index settings can be altered here.
This property makes an element transition smoothly from one state to another.
This property gives you the power to transform your element in a variety of ways, like 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
It has never been simpler to import modules from NPM into your component.
Optimize your site to promote it on search engines.
Easily complete or host your project on your server by exporting it into an archive with 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
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
All of the entities that are present on the page are displayed by the editor.
Component code or page errors can be detected in the debug console.
Tooltips in the code
Not sure about the spelling of a property? Start typing and the editor will provide assistance.
Synched pages and code editor
Pages and code are updated in real-time, displaying all changes made in both areas.
Send your coworkers an invitation to collaborate with you on a project using the Quarkly collaboration tool.
Any element can serve as a tag. Simply select the "as" property value you require.
In the code editor, you can assign desired attributes to any element.
This is an individual property that belongs to the “Image” element.
This feature helps you install unique icons for all devices and individual tile background color for Windows 10.
Open graph and meta tags
Use these settings for the correct display of your site on social networks and in search engines.
Set up user-friendly URLs to improve your site position in the search engines and increase the usability of the resource.
Robots.txt and sitemap.xml
These files are automatically generated. You can edit these files to suit your needs for the future.
We provide Quarkly for free as long as we can, and then the lowest price among competitors.Create project