Get all the power of graphic design tools and website builders. Unlimited customisation possibilities, no-code tools of a classic editor. Choose from one of many pre-made blocksCreate Project
Basic components with a similarity to HTML tags, like Text, Image, Box, and others.
Themes make it easy to give your website a unified appearance.
Make your websites more useful by adding original layouts, animations, effects, and transformations.
Fine-tune your adaptive design
Transform an element or group of elements on the page or Layer panel into a component. Add copies to the page and they will inherit all properties.
Make your page come alive with ready-made blocks like maps, videos, pop-ups, and many more.
Customizing design with breakpoints
Make sure your site is 100% adaptive by using different design solutions for elements at breakpoints.
Adding and editing breakpoints
You can create, edit, or delete custom breakpoints in the project theme.
Place elements however you want on the page — that is your choice. You can drop them in the desired area, or nest them in other ones.
You can apply styles to multiple elements at once and move them around, as well as remove them.
Bold, italic, link, span, and other styles, all options to make your text stand out.
Click twice to go up and down the hierarchy of elements. If you need to get inside the hierarchy, hold down Ctrl on Windows or Cmd on MacOs.
Support of Flexbox and Grid
At Quarkly, we keep up with the up-to-date frontend coding approaches.
Configuring styles of pseudo-classes hover/active/focus, etc.
Alter the appearance of an element, such as its hover behavior, by turning on "hover" and setting the required properties.
Google Fonts Connection
The library of over 990 font families will help make your site look more beautiful.
One of the most well-liked free photo sites is Unsplash. From the Quarkly interface, you can search for and choose images.
Make use of the categorized style and props to your advantage.
In this section, you can configure element display properties.
You can apply the text style properties found here to your text.
You can configure margins and paddings in these settings.
This section offers props for setting up element backgrounds.
Find the options for borders and border radius configuration in this section.
This category helps you configure element position and z-index settings.
An element can transition from one state to another more easily thanks to this property.
You can rotate or zoom the element using this property, for example.
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
Modules from NPM can be imported into your component.
Optimize your site to promote it on search engines.
If you need to complete or host your project on your own server, it's easy: just export it into an archive with a 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
You can build a GitHub repository for your projects if necessary and commit updates there.
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 are visible in the editor.
You can keep track of component code and page errors with the debug console.
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
Changes made to a page are reflected in the code and vice versa.
Make use of the Quarkly collaboration tool by inviting your teammates to work on a project with you.
You can make a component act as a tag by setting the “as” property to the desired value.
You can provide elements the appropriate characteristics in the code editor.
A unique attribute of 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
Use these settings to ensure that your website appears as intended on social media and in search results.
Set up user-friendly URLs to improve your site position in the search engines and increase the usability of the resource.
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