Create your website from scratch or ready-to-use templates. Use pre-made React components or build your own. Get all the power of graphic design tools and website buildersCreate Project
Basic components with a similarity to HTML tags, like Text, Image, Box, and others.
You can use themes to create a consistent design for your site.
Now your website will be noticed! Use our unique animations, catchy layouts, and transformations.
Fine-tune your adaptive design
Choose an element or elements on the page or Layer panel, convert them into a component, and add copies to the page for seamless inheritance of all properties.
With pre-made blocks, you can add maps, videos, pop-ups, and more to your website.
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 change current breakpoints in the project theme or add new ones.
You can align or stack elements however you want and drop them on any area of the page, or nest them in other elements.
You can choose multiple elements, set their styles, move to another place, delete, and more.
You can link certain passages of text, make them bold or italic, or both. You can choose the font face, size, and color as well.
The double click allows you to move up and down the hierarchy of elements. Hold down the Ctrl key on Windows or the Cmd key on a Mac to enter the hierarchy.
Support of Flexbox and Grid
Here at Quarkly, we are the advocates of cutting-edge approaches to frontend coding.
Configuring styles of pseudo-classes hover/active/focus, etc.
To alter how an element appears, for instance in a hover state, activate the "hover" prop and arrange the desired props.
Google Fonts Connection
To make your site design look more professional go and use a library of more than 990 font families.
Select stunning images from the Unsplash library directly through the Quarkly interface.
Enjoy a friendly interface with categorized styles and useful properties.
This section allows you to configure the display properties of elements.
You can change text styles by using special properties in this section.
Margin and padding configuration is available here.
Props for setting up element backgrounds can be found in this section.
You can change the border radius and borders in this section.
This category lets you use position and z-index settings.
This property makes an element change smoothly from one state to another.
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
In Quarkly, you can create custom React components in the code editor and then place them on the page.
The pages are written in JSX code typical for React.js.
Hot import from NPM
Importing modules to your component from NPM has never been easier.
Optimize your site to promote it on search engines.
If your goal is to host a project on your server, here's the one thing you have to do: export it into an archive with a create-react-app project!
Fine-tune elements in the code editor.
Export to Gatsby Project
You can export your projects to Gatsby — one of the best open source Static Site Generators.
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.
Our debug console will help you track errors in the component code and pages.
Tooltips in the code
Start typing and the editor will auto-complete what you've written if you need help spelling a property.
Synched pages and code editor
The code and pages both reflect any modifications made to the pages.
Take advantage of the Quarkly collaboration tool: work on a project together with your teammates, just send them an invite.
All components can be used as a tag. Just select the tag's “as” property value.
You can edit the necessary attributes of elements in the code editor.
This particular property is a part of the "Image" element.
This feature allows you to install icons for all devices and change the background color of individual tiles in 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.
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