Unlimited customisation possibilities, no-code tools of a classic editor. Publish your website online or export it to Github. All-in-one website builder on React — QuarklyCreate Project
A website is made up of fundamental elements similar to HTML tags. For example, Text, Image, and Вох.
Create a professional-looking design easily by using themes.
Put the power of animation, effects, and transformations at your fingertips.
Fine-tune your adaptive design
Components are reusable design elements. To create a component, select an element or group of elements on the page or in the Layers panel and group them into component. Add copies of the component to the page, and they will inherit all their properties from the original.
Get creative with ready-made blocks: maps, videos, pop-ups, and much more.
Customizing design with breakpoints
Your website is completely responsive to mobile devices by using different design solutions for elements at breakpoints.
Adding and editing breakpoints
In the project theme, you may want to add custom breakpoints or edit existing ones.
Element placement options include dragging and dropping, nesting, and arranging them however you like on the page.
You can select multiple elements and set their styles, drag to another place, remove, and more.
If needed, you can change part of the text into bold or italic, link or convert it to span, or edit its style.
If you need to go up and down the hierarchy of elements, double-click them. If you want to dive into the hierarchy, hold down the Ctrl key on Windows and the Cmd key on MacOs.
Support of Flexbox and Grid
Quarkly supports the most advanced approaches to frontend coding.
Configuring styles of pseudo-classes hover/active/focus, etc.
To change the element appearance, for example, the way it behaves on hover, enable "hover" and apply the desired props.
Google Fonts Connection
Make use of fonts from a collection that includes over 990 font families to give your website a more vibrant appearance.
Browse the Unsplash image collection and choose those you need directly from the Quarkly interface.
Enjoy categorized style and functional properties.
This section lets you control how elements appear.
You can apply the text style properties found here to your text.
To set margins and paddings, open these settings.
Here, you will have access to props for element background setup.
You can define borders and border radius using these options.
This category contains settings for configuring the position and z-index of elements.
This property makes an element move smoothly from one state to another.
With the help of this property, you can rotate or zoom an element.
Create custom React components using the code editor
The Quarkly code editor allows you to 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.
You can export a create-react-app project into an archive file that you can host on your own server.
Fine-tune elements in the code editor.
Export to Gatsby Project
In no time, you can export your projects to Gatsby — one of the best open-source SSGs
Pushing commits to your GitHub repository
You can create a GitHub repository for your project and commit changes.
Publication on Netlify
When your site is ready, publish it on Netlify. It'll have a technical domain, for example: https://inspiring-beaver-d128ed.netlify.app.
Modern built-in code editor
In the Quarkly editor, you can find all the entities of the page.
You can track issues in the component code and pages with the aid of our debug console.
Tooltips in the code
If you need help when spelling a property, start typing and the editor will auto-complete what you've written.
Synched pages and code editor
When you make changes to the page, you can see those same edits reflected in the code.
Make use of the Quarkly collaboration tool by inviting your teammates to work on a project with you.
Make every component work as a tag by selecting the desired "as" property value.
You can edit the necessary attributes of elements in the code editor.
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
Make sure your website stands out in search engine results and social media with these display settings.
Make sure you use human-readable URLs to 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