Complete design control, supports Grid and Flexbox. Use pre-made React components or build your own. All-in-one website builder on React — QuarklyCreate Project
Website is composed of basic components similar to HTML tags such as Text, Image, and Вох.
Using themes you can create a consistent design for your site
Boost your websites' functionality with distinctive layouts, animations, effects, and transformations.
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.
Add ready-made blocks: maps, videos, pop-ups, and many more
Customizing design with breakpoints
Your site works perfectly on mobile devices by using different design solutions for elements at breakpoints.
Adding and editing breakpoints
You have an opportunity to use breakpoints of the project theme or download your own ones.
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 pick multiple elements, modify their styles, move them to a different location, delete them, and more.
A portion of the text can be changed by applying any style, making it bold or italic, linking to it or making it a span.
You can move through the elemental hierarchy by double clicking. Hold down the Ctrl key on Windows or the Cmd key on MacOs to enter the hierarchy.
Support of Flexbox and Grid
The most cutting-edge methods of front-end coding are supported by Quarkly.
Configuring styles of pseudo-classes hover/active/focus, etc.
Transform the appearance of an element, including its hover behavior, by turning on "hover" and adjusting the desired properties.
Google Fonts Connection
Use the library of over 990 font families to make your site look more beautiful
Use Unsplash, a top-rated free image stock, to search for images and select them directly from Quarkly.
Enjoy a friendly interface with categorized styles and useful properties.
You can set the element display properties in this section.
You can apply the text style properties found here to your text.
Margin and padding configuration is available here.
Here you'll find some props to help you set up element backgrounds.
This section allows you to configure borders and border radius.
You can modify the settings for element position and z-index in this category.
This property makes an element transition smoothly from one state to another.
This property will help you transform the element, for instance, rotate or zoom.
Create custom React components using the code editor
In Quarkly, you can create custom React components in the code editor and then place them on the page.
The pages are written in JSX code typical for React.js.
Hot import from NPM
Import modules to your component with ease, if needed.
Optimize your site to promote it on search engines.
You can finish or host your project on your server with ease by exporting it into an archive with create-react-app project.
Fine-tune elements in the code editor.
Export to Gatsby Project
Export your projects to Gatsby, one of the most well-known web frameworks for static site generation.
Pushing commits to your GitHub repository
If needed, you can create a GitHub repository for your project and commit changes.
Publication on Netlify
Publish your site on Netlify once it's ready. A technical domain will be created automatically for it, for example: https://inspiring-beaver-d128ed.netlify.app.
Modern built-in code editor
All of the page's entities can be found in the Quarkly editor.
When there are errors in the component code or pages, they can be seen in the debug console.
Tooltips in the code
Start typing and the editor will correct you if you don't know how to spell a particular property.
Synched pages and code editor
Every change you make to a page is reflected in the code, and vice versa.
Profit from the Quarkly collaboration tool by inviting your colleagues to work on a project with you.
Component-to-tag transformation made simple with the right "as" property value selection.
In the code editor, you can add attributes to elements as necessary.
This is a separate property of the “Image” element.
This feature allows you to install icons for all devices and change the background color of individual tiles in Windows 10.
Open graph and meta tags
Your site will display appropriately thanks to these settings on social media and search engines.
It's a good idea to use human-readable URLs to improve your site's search engine optimization.
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