Completely free — you should try it now. Get all the power of graphic design tools and website builders. Complete design control, supports Grid and FlexboxCreate Project
These are the most basic components similar to HTML tags: Text, Image, Box, and others.
With themes, you can craft a consistent site design
Put the power of animation, effects, and transformations at your fingertips.
Fine-tune your adaptive design
Components are reusable design elements. To create a component, select an element or group of elements on the page or in the Layers panel and group them into component. Add copies of the component to the page, and they will inherit all their properties from the original.
You can also add ready-made blocks: maps, videos, pop-ups and much 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
Choose from the preset breakpoints or use your own.
You can align or stack elements however you want and drop them on any area of the page, or nest them in other elements.
You can select multiple elements and apply formatting to them, drag them to another spot in the document, or remove them from their current location.
You can edit part of the text making it bold or italic, turning it into a link or converting to span, as well as appyling any style to it.
You can double-click to go up and down the hierarchy of your objects. If you need to get inside the hierarchy, hold down the Ctrl key on Windows or Cmd on MacOs.
Support of Flexbox and Grid
At Quarkly, we support the latest and greatest in frontend coding.
Configuring styles of pseudo-classes hover/active/focus, etc.
To change the appearance of an element, for example, its hover behavior, enable the "hover" prop and apply any desired additional props.
Google Fonts Connection
Make your website look more vibrant by using fonts from a library with over 990 font families.
Unsplash is one of the most popular free image stocks. Search and select images directly from the Quarkly interface
This offers categorized style and functional properties.
This section lets you control how elements appear.
To change the style of your text, use special properties in this section.
These settings allow you to change margins and paddings.
This section consists of props for element backgrounds.
In this section, you can adjust borders and border radius.
This category lets you use position and z-index settings.
This property helps an element move smoothly from one state to another.
This property will help you transform the element, for instance, rotate or zoom.
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
Import modules to your component from NPM in no time, if needed.
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
You can export your projects to Gatsby — one of the most popular static site generators.
Pushing commits to your GitHub repository
Want to create a GitHub repository for your project and commit changes there? Piece of cake!
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
The editor displays all the entities of the page.
Errors in the component code or pages will show up in the debug console.
If you need help when spelling a property, start typing and the editor will auto-complete what you've written.
Synched pages and code editor
The code and the pages are merged, so your changes to the code are visible in the page and vice versa.
Work on projects with your teammates using the Quarkly collaboration tool, just send them an invite.
You can use each component as a tag. Just choose the needed value of the “as” property.
In the code editor, you can assign desired attributes to any element.
A separate property belonging to the “Image” element.
You can install different icons for different devices, and you can also set a unique background color for Windows 10.
Open graph and meta tags
These settings will help your site display correctly on social networks and in search engines.
To improve your site's SEO, make sure the URLs are readable by humans.
Robots.txt and sitemap.xml
These files are created automatically for you to edit further.
We provide Quarkly for free as long as we can, and then the lowest price among competitors.Create project