Unlimited customisation possibilities, no-code tools of a classic editor. Create your website from scratch or ready-to-use templates. All-in-one website builder on React — QuarklyCreate Project
Basic elements that resemble HTML tags: Text, Image, Box, and others.
With themes, you can craft a consistent site design
Supercharge your sites with unique layouts, animations, effects, 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.
Additionally, you can include pre-made blocks like maps, videos, pop-ups, and much 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
You can add custom breakpoints or edit existing ones in the project theme.
Elements can be moved around, positioned however you like on the page, or nested inside other elements.
Use the multi-select feature to apply styles, move, remove, or perform other actions on multiple elements.
If needed, you can change part of the text into bold or italic, link or convert it to span, or edit its style.
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 excited to offer you the best frontend coding practices around.
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
By incorporating fonts from a collection of more than 990 font families, you can give your website design more expression.
Use Unsplash, a top-rated free image stock, to search for images and select them directly from Quarkly.
Here you will find categorized style and functional properties.
This section allows you to configure the display properties of elements.
Check out this section to take advantage of text style properties.
In these settings, you can set margins and paddings.
This section has props you can use to set up element backgrounds.
The properties for borders and border radius can be found here.
In this category, you can change the settings for element position and z-index.
This property makes it easier for an element to change 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
With the Quarkly code editor, you can create custom React components and then use them on a webpage.
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.
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
You can export your projects to Gatsby — one of the best open source Static Site Generators.
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
All of the page's entities can be found in the Quarkly editor.
The debug console shows errors in the component code or pages.
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
Whatever changes you make to the pages, they all will be displayed in the code and vice versa.
Send your coworkers an invitation to collaborate with you on a project using the Quarkly collaboration tool.
Every component can act as a tag. Just choose the “as” property value that you need.
You can set attributes to elements in the code editor.
The "Image" element features a separate property.
This feature helps you install unique icons for all devices and individual tile background color for Windows 10.
Open graph and meta tags
Make sure your website stands out in search engine results and social media with these display settings.
Use human-readable URLs to increase the SEO of your website.
Robots.txt and sitemap.xml
These files are automatically created. But you can edit them if necessary.
We provide Quarkly for free as long as we can, and then the lowest price among competitors.Create project