Create your website from scratch or ready-to-use templates. Unlimited customisation possibilities, no-code tools of a classic editor. Use pre-made React components or build your ownCreate 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.
With stylish animations, effects, and transformations, you can make your web page more exciting.
Fine-tune your adaptive design
Create a component from one or more objects on the page or from the Layer panel. Add copies of the component to the page, and they will inherit all the props.
Add maps, videos, pop-ups, and more to your site with ready-made blocks.
Customizing design with breakpoints
By utilizing various design approaches for elements at breakpoints, your website is completely responsive to mobile devices.
Adding and editing breakpoints
You can create, edit, or delete custom breakpoints in the project theme.
Elements can be moved around, positioned however you like on the page, or nested inside other elements.
Use the multi-element selection tool to set styles, move, remove, or take other actions on multiple elements.
Style text as desired, make it bold or italic, turn it into a link or convert it to span, the choice is yours.
Navigate the hierarchy of elements with a double click. Hold down Ctrl on Windows or Cmd on MacOS to dive deeper.
Support of Flexbox and Grid
At Quarkly, we use the most advanced frontend coding techniques.
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 fonts from a library that has over 990 font families in it to make your website look more colorful.
Use Unsplash, one of the most popular free image stocks that provide images you can use directly without downloading.
Style and utility characteristics are categorized here.
This section allows you to configure the display properties of elements.
Use the special properties in this section to alter the text's style.
In these settings, you can set margins and paddings.
This section contains props that help you create element backgrounds.
You can set borders and border radius in this section.
You can modify the settings for element position and z-index in this category.
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
You can design distinctive React components in the Quarkly code editor and then insert them on 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.
If your goal is to host a project on your server, here's the one thing you have to do: export it into an archive with a create-react-app project!
Fine-tune elements in the code editor.
Export to Gatsby Project
One of the most popular static site generators, Gatsby, can be the destination for your exported projects.
Pushing commits to your GitHub repository
If you need, you can create a GitHub repository for your projects and commit changes.
Publication on Netlify
Publish your site on Netlify whenever it's ready. A custom domain will be automatically generated for you, for example: https://inspiring-beaver-d128ed.netlify.com
Modern built-in code editor
In the Quarkly editor, you can find all the entities of the page.
To find faults in the component code and pages, use our debug console.
Tooltips in the code
Start typing if you're unsure of how to spell a word, and the editor will fill in the blanks for you.
Synched pages and code editor
All edits you apply to the pages are shown in the code and vice versa.
Send your coworkers an invitation to collaborate with you on a project using the Quarkly collaboration tool.
You can use each component as a tag. Just choose the needed value of the “as” property.
In the code editor, you can assign necessary attributes to elements.
The "Image" element has a distinct property for this.
This feature helps you install unique icons for all devices and individual tile background color for Windows 10.
Open graph and meta tags
These settings will help your website look its best on social networks and in 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 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