Create your website from scratch or ready-to-use templates. Use pre-made React components or build your own. Choose from one of many pre-made blocksCreate Project
Primitive content elements function similarly to HTML tags. For example, Text, Image, and Вох.
Themes make it easy to create a consistent look for your website.
Make your websites more useful by adding original layouts, animations, effects, and transformations.
Fine-tune your adaptive design
Any combination of elements on the page or in a layer can be used to create reusable components. The component inherits all of its original properties when you add it to a page.
Add maps, videos, pop-ups, and more to your site with ready-made blocks.
Customizing design with breakpoints
Guarantee a 100% adaptive website by using design solutions that cater to elements at breakpoints.
Adding and editing breakpoints
You can add custom breakpoints or edit existing ones in the project theme.
Element placement options include dragging and dropping, nesting, and arranging them however you like on the page.
You can select multiple elements and move them to another location, remove them, and more.
Style text as desired, make it bold or italic, turn it into a link or convert it to span, the choice is yours.
Use the double click to move up and down the hierarchy of elements in your document. If you need to go inside the hierarchy, hold down the Ctrl key on Windows and the Cmd key on MacOs.
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.
To change the appearance of an element, for example, the way it behaves on hover, just enable "hover" and set up the desired props.
Google Fonts Connection
Let your website design express your brand's personality by connecting fonts from a library with more than 990 font families.
Use Unsplash, one of the most popular free image stocks that provide images you can use directly without downloading.
Enjoy categorized styles and functional properties in a friendly interface.
This section lets you control how elements appear.
Use the properties in this section to change the text's appearance.
You can configure margins and paddings in these settings.
This section offers props for setting up element backgrounds.
You can define borders and border radius using these options.
Here, element position and z-index can be adjusted through these settings.
This property makes an element move smoothly from one state to another.
You can rotate or zoom the element using this property, for example.
Create custom React components using the code editor
You can build custom React components in the Quarkly code editor and after that add them to the page.
The pages are written in JSX code typical for React.js.
Hot import from NPM
You can import modules to your component from NPM in a few clicks.
Optimize your site to promote it on search engines.
To wrap up your project or host it on your server, simply export it into an archive using a create-react-app project.
Fine-tune elements in the code editor.
Export to Gatsby Project
One of the most well-liked static site generators, Gatsby, is one to which you can export your projects.
Pushing commits to your GitHub repository
You can establish a GitHub repository for your project and submit updates there if necessary.
Publication on Netlify
Once your site is ready, publish it on Netlify with a domain name like inspiring-beaver-d128ed.netlify.app.
Modern built-in code editor
The editor displays every entity on the page.
Our debug console will help you track errors in the component code and pages.
Tooltips in the code
If you have doubts about how to spell a property, start typing, and the editor will auto-complete what you're writing.
Synched pages and code editor
Any adjustments you make to the pages will also be reflected in the code, and vice versa.
Utilize the Quarkly collaboration tool to work on a project with your teammates; all you need to do is invite them.
Any element can serve as a tag. Simply choose the required "as" property value.
You can add necessary attributes to elements in the code editor.
A separate property belonging to the “Image” element.
You can use unique icons for different devices and change the background color of Windows 10 tiles.
Open graph and meta tags
These settings will help your website look its best on social networks and in search engines.
This feature allows you to set friendly URLs for your pages.
Robots.txt and sitemap.xml
Automated file creation with the option to edit as desired.
We provide Quarkly for free as long as we can, and then the lowest price among competitors.Create project