Visual interface, adaptive design settings, code editor, React components, all possibilities of CSS. Completely free — you should try it now. Create your website from scratch or ready-to-use templatesCreate Project
Basic components with a similarity to HTML tags, like Text, Image, Box, and others.
Create a professional-looking design easily by using themes.
Add some flash to your web pages with stylish animations, effects, and transformations.
Fine-tune your adaptive design
On the page, you can select an element (or a collection of elements) and turn them into a component. All the props will be passed on to copies that are added to the page.
To improve your website, use the pre-made blocks, which include videos, pop-ups, maps, and more.
Customizing design with breakpoints
Check out your 100% adaptive website by using different design solutions for elements and breakpoints.
Adding and editing breakpoints
Customize or edit breakpoints in the project theme as desired.
Elements can be dropped anywhere on the page, stacked however you like, and nested inside other elements.
You can select multiple elements and set their styles, drag to another place, remove, and more.
You can link certain passages of text, make them bold or italic, or both. You can choose the font face, size, and color as well.
To move through the elemental hierarchy, double-click. Hold down the Ctrl key on Windows or the Cmd key on Mac OS to enter the hierarchy.
Support of Flexbox and Grid
Here at Quarkly, we are the advocates of cutting-edge approaches to frontend coding.
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
Use fonts from a library that has over 990 font families in it to make your website look more colorful.
Browse Unsplash's collection of free images and choose directly from the Quarkly interface.
Enjoy categorized styles and functional properties in a friendly interface.
Check out this section to use element display properties.
You can change text styles by using special properties in this section.
To configure margins and paddings, open these settings.
The section contains props that enable you to set element backgrounds.
Here you can configure border and border radius.
This category helps you configure the position and z-index settings of elements.
Elements can easily transition from one state to another thanks to this property.
This property can be used to rotate or zoom the element, for example.
Create custom React components using the code editor
With the Quarkly code editor, you can 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
You can import modules to your component from NPM.
Optimize your site to promote it on search engines.
Simply export it as an archive using a create-react-app project if you need to finish or host your project on your own server.
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
You can build a GitHub repository for your projects if necessary and commit updates there.
Publication on Netlify
When it's ready, publish your website on Netlify. It will automatically create a technical domain.
Modern built-in code editor
The editor displays all the entities of the page.
When there are errors in the component code or pages, they can be seen in the debug console.
Tooltips in the code
If you're not sure how to spell a property, type the first few letters and the editor will complete it for you.
Synched pages and code editor
As you make changes to the pages, the changes display in the code and vice versa.
Benefit from the Quarkly collaboration tool: work on a project with your team by just sending them an invite.
All components can act as a tag. Just select the necessary “as” property value.
In the code editor, you can assign necessary attributes to elements.
The "Image" element has a unique property.
Set up custom icons for all devices and individual tile background color for Windows 10.
Open graph and meta tags
These settings are meant for the correct display of your website in search engine results and social media
Make sure your site's URLs are human-readable to improve search engine optimization.
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