Use pre-made React components or build your own. Complete design control, supports Grid and Flexbox. Unlimited customisation possibilities, no-code tools of a classic editorCreate Project
A website is made up of fundamental elements similar to HTML tags. For example, Text, Image, and Вох.
Build a professional-looking design using themes
Put the power of animation, effects, and transformations at your fingertips.
Fine-tune your adaptive design
Group elements on the Layer panel, and then convert them into components. Add copies of the components to your page, and all of their settings will be inherited.
Enhance your page with ready-made blocks including maps, videos, pop-ups, and more.
Customizing design with breakpoints
Guarantee a 100% adaptive website by using design solutions that cater to elements at breakpoints.
Adding and editing breakpoints
In the project theme, you can modify already-existing breakpoints or add new ones.
You can move the elements wherever you want. Nest them in other elements, or leave them as they are.
You can apply styles to multiple elements at once and move them around, as well as remove them.
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
Quarkly supports the most modern methods of frontend coding.
Configuring styles of pseudo-classes hover/active/focus, etc.
To change the way an element looks, such as its appearance on hover, enable the "hover" prop and set other desired props.
Google Fonts Connection
Make use of fonts from a collection that includes over 990 font families to give your website a more vibrant appearance.
Use Unsplash, a top-rated free image stock, to search for images and select them directly from Quarkly.
Enjoy a friendly interface with categorized styles and useful properties.
Under this section, you can find element display properties.
You can change text styles by using special properties in this section.
These settings allow you to change margins and paddings.
This section contains props that help set element backgrounds.
Here you can configure borders and border radius.
This category allows you to position elements and set their z-index values.
This property makes it easier for an element to change 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
Create your own React components in the Quarkly code editor and seamlessly integrate them into the page.
The pages are written in JSX code typical for React.js.
Hot import from NPM
Quickly import modules to your component from NPM when needed.
Optimize your site to promote it on search engines.
You can finish or host your project on your server with ease by exporting it into an archive with 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
Want to create a GitHub repository for your project and commit changes there? Piece of cake!
Publication on Netlify
Publish your website to Netlify once it is complete. Its technical domain name will be generated automatically.
Modern built-in code editor
You can monitor all the entities on the page in the Quarkly editor.
Errors in the component code or pages can be tracked by viewing the debug console.
Tooltips in the code
If you're unsure how to spell a property, start typing and the editor will provide suggestions.
Synched pages and code editor
No matter what changes are made to the pages or code, both are always in sync.
Send your coworkers an invitation to collaborate with you on a project using the Quarkly collaboration tool.
Each and every component can behave as a tag. Just choose the needed value of the “as” property.
You can provide elements the appropriate characteristics in the code editor.
This is an individual property that belongs to the “Image” element.
This feature helps you to install unique icons for all devices.
Open graph and meta tags
These settings will help your website look its best on social networks and in search engines.
Make sure you use human-readable URLs to improve your site's SEO.
Robots.txt and sitemap.xml
You can further change these automatically generated files.
We provide Quarkly for free as long as we can, and then the lowest price among competitors.Create project