Visual interface, adaptive design settings, code editor, React components, all possibilities of CSS. Choose from one of many pre-made blocks. All-in-one website builder on React — QuarklyCreate Project
Primitive content elements function similarly to HTML tags. For example, Text, Image, and Вох.
Build a consistent design using themes
Put the power of animation, effects, and transformations at your fingertips.
Fine-tune your adaptive design
Group elements on the Layer panel, and then convert them into components. Add copies of the components to your page, and all of their settings will be inherited.
To improve your website, use the pre-made blocks, which include videos, pop-ups, maps, and more.
Customizing design with breakpoints
By creating various solutions for elements at breakpoints, you can ensure that your website is mobile-friendly.
Adding and editing breakpoints
You can create, edit, or delete custom breakpoints in the project theme.
You decide where to place the elements. Move them wherever you want, or nest them in other elements.
You can pick multiple elements, modify their styles, move them to a different location, delete them, and more.
You can make parts of your text bold or italic, or turn them into links. The font face, size, and color are also up to you.
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 modern methods of 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
Make your website design more expressive by connecting fonts from a library with more than 990 font families.
Browse the Unsplash image collection and choose those you need directly from the Quarkly interface.
Here you will find categorized style and functional properties.
You can find the element display properties under this section.
To change the style of your text, use special properties in this section.
In these settings, you can set margins and paddings.
This section offers props for setting up element backgrounds.
You can change the border radius and borders in this section.
Element position and z-index settings can be adjusted in this category.
This property makes an element move smoothly 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
Create your own React components in the Quarkly code editor and seamlessly integrate them into the page.
The pages are written in JSX code typical for React.js.
Hot import from NPM
Import modules to your component from NPM with ease.
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
One of the best open-source SSGs, Gatsby, may be used to export your projects in no time.
Pushing commits to your GitHub repository
You can store your project in a GitHub repository and make changes to it.
Publication on Netlify
When it's ready, publish your website on Netlify. It will automatically create a technical domain.
Modern built-in code editor
In the Quarkly editor, you can monitor all the entities that are present on the page.
Component code or page errors can be detected in the 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
All of the edits you make to the site are shown in the code and vice versa.
Check out the Quarkly collaboration tool: send an invite to your teammates to work on a project with them.
Component-to-tag transformation made simple with the right "as" property value selection.
Assign attributes to elements with ease in the code editor.
This is a separate property of the “Image” element.
Set up unique Windows tile background colors and exclusive icons for multiple devices.
Open graph and meta tags
Configure these settings to display your website correctly in search engine results and social media.
Clean URLs will help you improve your site's SEO.
Robots.txt and sitemap.xml
These files are automatically produced. However, you are free to modify them as you see fit in the future.
We provide Quarkly for free as long as we can, and then the lowest price among competitors.Create project