Visual interface, adaptive design settings, code editor, React components, all possibilities of CSS. Publish your website online or export it to Github. Choose from one of many pre-made blocksCreate Project
The most primitive building blocks similar to HTML tags. For example, Text, Image, and Box.
You can use themes to create a consistent design for your site.
Bring life into your web page with stylish animations, effects, and transformations.
Fine-tune your adaptive design
Make a component out of a single element or a collection of elements on the page or in the Layers panel. All of the props will be inherited by component copies that are added to the page.
Make your page come alive with ready-made blocks like maps, videos, pop-ups, and many more.
Customizing design with breakpoints
By employing various design solutions for elements at breakpoints, your website functions flawlessly on mobile devices.
Adding and editing breakpoints
You can create, edit, or delete custom breakpoints in the project theme.
Elements can be moved around, positioned however you like on the page, or nested inside other elements.
You can pick multiple elements, modify their styles, move them to a different location, delete them, and more.
You can make parts of your text bold or italic, or turn them into links. The font face, size, and color are also up to you.
Use the double click to move up and down the hierarchy of elements in your document. If you need to go inside the hierarchy, hold down the Ctrl key on Windows and the Cmd key on MacOs.
Support of Flexbox and Grid
Quarkly supports the most advanced approaches to frontend coding.
Configuring styles of pseudo-classes hover/active/focus, etc.
To modify the look of an element, such as its hover appearance, simply enable "hover" and customize the properties.
Google Fonts Connection
The library of over 990 font families will help make your site look more beautiful.
Unsplash is one of the most popular websites for free photos. You can look for and select images using the Quarkly interface.
Here you'll find categorized collections of style and functional properties.
Element display properties can be found here.
To change text styles, use special properties in this section
Open these settings to configure margins and paddings.
Here, you will have access to props for element background setup.
Here you can adjust borders and border radius.
You can modify the settings for element position and z-index in this category.
Elements can easily transition from one state to another thanks to this property.
This property gives you the power to transform your element in a variety of ways, like rotating or zooming.
Create custom React components using the code editor
Custom React components can be made in Quarkly's code editor and then inserted onto the page.
The pages are written in JSX code typical for React.js.
Hot import from NPM
Import modules to your component from NPM with ease.
Optimize your site to promote it on search engines.
Easily complete or host your project on your server by exporting it into an archive with a create-react-app project.
Fine-tune elements in the code editor.
Export to Gatsby Project
Your projects can be easily exported to Gatsby, a well-liked static site generator.
Pushing commits to your GitHub repository
You can store your project in a GitHub repository and make changes to it.
Publication on Netlify
Publish your site on Netlify whenever it's ready. A custom domain will be automatically generated for you, for example: https://inspiring-beaver-d128ed.netlify.com
Modern built-in code editor
The editor shows each and every entity that is present on the page.
Errors in the component code or pages can be seen in the debug console.
Tooltips in the code
As you type, the editor will suggest possible matches to the property you're looking for.
Synched pages and code editor
Every change you make to a page is reflected in the code, and vice versa.
Take advantage of the Quarkly collaboration tool: work on a project together with your teammates, just send them an invite.
Make every component work as a tag by selecting the desired "as" property value.
You can set desired attributes to elements in the code editor.
The "Image" element has a distinct property for this.
Install distinctive device icons and a customized Windows tile backdrop color.
Open graph and meta tags
These settings will help your site display correctly on social networks and in search engines.
You may increase the SEO of your site by using clean URLs.
Robots.txt and sitemap.xml
These files are automatically produced. But if necessary, you can alter them.
We provide Quarkly for free as long as we can, and then the lowest price among competitors.Create project