Complete design control, supports Grid and Flexbox. Get all the power of graphic design tools and website builders. Unlimited customisation possibilities, no-code tools of a classic editorCreate Project
Website is composed of basic components similar to HTML tags such as Text, Image, and Вох.
Create a consistent and professional-looking design with the help of themes.
Make your websites more useful by adding original layouts, 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.
Place ready-made blocks on the page, for example, maps, videos, pop-ups, and more
Customizing design with breakpoints
By creating various solutions for elements at breakpoints, you can ensure that your website is mobile-friendly.
Adding and editing breakpoints
You can change current breakpoints in the project theme or add new ones.
The choice is yours on how to arrange elements on the page — nest them, move them, or drop them in the desired area.
Use the multi-select feature to apply styles, move, remove, or perform other actions on multiple elements.
You can bold or italicize part of the text; turn it into a link or a span; or apply any other style to it.
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 support the latest and greatest in 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
Add a personal touch to your website with the use of 990+ font families available in the library.
Use Unsplash, a top-rated free image stock, to search for images and select them directly from Quarkly.
Take advantage of the categorized style and functional props.
You can find the element display properties under this section.
To change the style of your text, use special properties in this section.
Open these settings to configure margins and paddings.
This section contains props that help you create element backgrounds.
Borders and border radius can be set up here.
Element position and z-index settings can be adjusted in this category.
This property makes it possible for elements to move smoothly from one state to another.
Transform your element with ease using this property, for example, rotate or zoom.
Create custom React components using the code editor
You can build and add custom React components to your Quarkly pages using the code editor.
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 export your project as an archive using a create-react-app project if you want to finish it or host it on your server.
Fine-tune elements in the code editor.
Export to Gatsby Project
Export your projects to Gatsby, a highly regarded static site generator.
Pushing commits to your GitHub repository
Create a GitHub repository for your project and commit changes as you work.
Publication on Netlify
When your site is complete, publish it on Netlify for an automatically generated technical domain, like https://inspiring-beaver-d128ed.netlify.app.
Modern built-in code editor
The editor displays all the entities of the page.
You can track issues in the component code and pages with the aid of our debug console.
Tooltips in the code
Start typing and the editor will give you a list of suggestions.
Synched pages and code editor
All edits you apply to the pages are shown in the code and vice versa.
Share projects and work with your team members via Quarkly's collaboration tool. It's easy to use.
Every component can act as a tag. Just choose the “as” property value that you need.
In the code editor, you can add attributes to elements as necessary.
The "Image" element has a unique property.
Get creative with device icons and tile background color on Windows 10 with this exclusive setup feature.
Open graph and meta tags
These options are designed to ensure that your website appears properly in search engine results and on social media.
To improve your site's SEO, make sure the URLs are readable by humans.
Robots.txt and sitemap.xml
These files are automatically created. But you can edit them if necessary.
We provide Quarkly for free as long as we can, and then the lowest price among competitors.Create project