Create your website from scratch or ready-to-use templates. Complete design control, supports Grid and Flexbox. Get all the power of graphic design tools and website buildersCreate Project
Basic components which are similar to HTML tags like Text, Image, Box, and others.
Create a professional-looking design easily by using themes.
Make your site stand out from the crowd with eye-catching layouts, animations, and transformations.
Fine-tune your adaptive design
Select an element or a group of elements on the Layer panel and turn it into a component. Add copies of the components to the page and all the props will be inherited.
Add premade blocks, including videos, pop-ups, maps, and more.
Customizing design with breakpoints
Your website will automatically adjust to different screen sizes, with different design solutions for elements at breakpoints.
Adding and editing breakpoints
You can customize the breakpoints in your project theme by adding or editing them.
Place elements exactly where you want them on the page, whether it be by dropping them, nesting them, or moving them.
You can pick multiple elements, modify their styles, move them to a different location, delete them, and more.
A portion of the text can be changed by applying any style, making it bold or italic, linking to it or making it a span.
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 modify the look of an element, such as its hover appearance, simply enable "hover" and customize the properties.
Google Fonts Connection
Use fonts from a library that has over 990 font families in it to make your website look more colorful.
Use Unsplash, a top-rated free image stock, to search for images and select them directly from Quarkly.
Style and utility characteristics are categorized here.
Element display properties can be found here.
Explore text style properties here
Open these settings to configure margins and paddings.
Props for element backgrounds can be found in this section.
This section allows you to configure borders and border radius.
You can change the element position and z-index settings in this category.
This property makes an element transition smoothly from one state to another.
With the help of this property, you can rotate or zoom an element.
Create custom React components using the code editor
Quarkly lets you design custom React components in the code editor and add them to the page.
The pages are written in JSX code typical for React.js.
Hot import from NPM
You can import modules to your component from NPM in a few clicks.
Optimize your site to promote it on search engines.
You can export a create-react-app project into an archive file that you can host on your own server.
Fine-tune elements in the code editor.
Export to Gatsby Project
You can export your projects to Gatsby, a popular static site generator (SSG).
Pushing commits to your GitHub repository
You can establish a GitHub repository for your project and submit updates there.
Publication on Netlify
Once it is complete, publish your website on Netlify. It will automatically generate a technical domain.
Modern built-in code editor
The editor displays every entity on the page.
Mistakes in the component code can be identified 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
When you edit a page, the changes are applied to the code and vice versa.
Send your coworkers an invitation to collaborate with you on a project using the Quarkly collaboration tool.
Every component can act as a tag. Just choose the “as” property value that you need.
In the code editor, you can assign desired attributes to any element.
The "Image" element has a unique property.
Set up exclusive icons for various devices and individual tile background color for Windows 10.
Open graph and meta tags
Set these options appropriately to ensure that your website appears as intended in social media and search engine results.
Use human-readable URLs to increase the SEO of your website.
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