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 blocks
Create ProjectPrimitives
Basic components with a similarity to HTML tags, like Text, Image, Box, and others.
Themes
Themes make it easy to give your website a unified appearance.
Extended Styling
Make your websites more useful by adding original layouts, animations, effects, and transformations.
Adaptive design
Fine-tune your adaptive design
Components
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.
Ready-made Content
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.
Drag'n'Drop
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.
Multiselect
You can apply styles to multiple elements at once and move them around, as well as remove them.
Text editor
Bold, italic, link, span, and other styles, all options to make your text stand out.
Deep select
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.
Unsplash images
One of the most well-liked free photo sites is Unsplash. From the Quarkly interface, you can search for and choose images.
Props panel
Make use of the categorized style and props to your advantage.
Layout
In this section, you can configure element display properties.
Typography
You can apply the text style properties found here to your text.
Indents
You can configure margins and paddings in these settings.
Background
This section offers props for setting up element backgrounds.
Borders
Find the options for borders and border radius configuration in this section.
Position
This category helps you configure element position and z-index settings.
Transition
An element can transition from one state to another more easily thanks to this property.
Transform
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.
React.js
The pages are written in JSX code typical for React.js.
Hot import from NPM
Modules from NPM can be imported into your component.
SEO
Optimize your site to promote it on search engines.
Export CRA
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.
Code Editor
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.
Debugger
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.
Collaboration
Make use of the Quarkly collaboration tool by inviting your teammates to work on a project with you.
Semantic tags
You can make a component act as a tag by setting the “as” property to the desired value.
Schema.org
You can provide elements the appropriate characteristics in the code editor.
Image ALT
A unique attribute of the "Image" element.
Favicons
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.
User-friendly URL
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