Choose from one of many pre-made blocks. Create your website from scratch or ready-to-use templates. Get all the power of graphic design tools and website buildersCreate Project
Primitive content elements function similarly to HTML tags. For example, Text, Image, and Вох.
Create a consistent and professional-looking design with the help of themes.
Now your website will be noticed! Use our unique animations, catchy layouts, and transformations.
Fine-tune your adaptive design
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.
Make your page come alive with ready-made blocks like maps, videos, pop-ups, and many more.
Customizing design with breakpoints
Your site works perfectly on mobile devices by using different design solutions for elements at breakpoints.
Adding and editing breakpoints
Use your custom breakpoints or choose one of the existing ones.
You can move the elements wherever you want. Nest them in other elements, or leave them as they are.
You can select multiple elements and set their styles, drag to another place, remove, and more.
You can change the appearance of text in many ways. For example, you can italicize it or make it bold. You can also make it into a link or turn it into a span element.
You can move through the elemental hierarchy by double clicking. Hold down the Ctrl key on Windows or the Cmd key on MacOs to enter the hierarchy.
Support of Flexbox and Grid
We follow up-to-date frontend coding approaches at Quarkly.
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
Give your website a more vibrant look by using fonts from a library that contains over 990 font families.
From the Quarkly interface, browse the Unsplash image library and select the images you require.
Make use of the categorized style and props to your advantage.
In this section, you can configure element display properties.
To change the style of your text, use special properties in this section.
To configure margins and paddings, open these settings.
This section consists of props for element backgrounds.
This section allows you to adjust borders and border radius.
You can modify the settings for element position and z-index in this category.
This property makes it easier for an element to change from one state to another.
You can use this property to transform the element, for example, rotate or zoom.
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
If necessary, quickly import modules into your component through NPM.
Optimize your site to promote it on search engines.
There is just one thing to do if you want to finish or host your project on your server: export it into an archive with a create-react-app project!
Fine-tune elements in the code editor.
Export to Gatsby Project
One of the most well-liked static site generators, Gatsby, is one to which you can export your projects.
Pushing commits to your GitHub repository
If you'd like to keep track of your changes, you can create a GitHub repository and commit them.
Publication on Netlify
Once your site is ready, publish it on Netlify with a domain name like 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.
Tooltips in the code
If you're not sure how to spell a property, type the first few letters and the editor will complete it for you.
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.
You can use every component as a tag. Just choose the “as” property value that you need.
You can edit the necessary attributes of elements in the code editor.
This is an individual property that belongs to the “Image” element.
Set up custom icons for all devices and individual tile background color for Windows 10.
Open graph and meta tags
These options are designed to ensure that your website appears properly in search engine results and on social media.
Enhance your site's visibility in search engines and ease of use with user-friendly URLs.
Robots.txt and sitemap.xml
Ready-made files available for customization and future editing.
We provide Quarkly for free as long as we can, and then the lowest price among competitors.Create project