Publish your website online or export it to Github. Complete design control, supports Grid and Flexbox. Use pre-made React components or build your ownCreate Project
Primitive content components work like HTML tags. For example, Text, Image, and Вох.
Using themes you can 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
Create a component from one or more objects on the page or from the Layer panel. Add copies of the component to the page, and they will inherit all the props.
Add videos, pop-ups, customized blocks, and much more to your site.
Customizing design with breakpoints
Check out your 100% adaptive website by using different design solutions for elements and breakpoints.
Adding and editing breakpoints
In the project theme, you may want to add custom breakpoints or edit existing 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 select multiple elements to set their styles, drag'n'drop them to another place, remove, etc.
You can change the appearance of text — for instance, making it bold or italic, turning it into a link, or converting it to a span—as well as apply any style to it.
If you need to go up and down the hierarchy of elements, double-click them. If you want to dive into the hierarchy, hold down the Ctrl key on Windows and the Cmd key on MacOs.
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 change the way an element looks, such as its appearance on hover, enable the "hover" prop and set other desired props.
Google Fonts Connection
If you want your site design to look more professional, consider using a library of more than 990 font families.
Unsplash is a popular free image stock. You can search and select images directly from the Quarkly interface.
Make use of the categorized style and props to your advantage.
Under this section, you can find element display properties.
To alter the appearance of your text, use the properties in this section.
Here you will find the settings for margins and paddings.
This section consists of props for element backgrounds.
With these options, you can set up borders and border radius.
This category allows you to adjust element position and z-index settings.
This property makes it possible for elements to move smoothly from one state to another.
You can transform the element using this property, for instance, rotate or zoom.
Building custom React components in the code editor
The Quarkly code editor allows you to create unique React components and then place them on the page.
The pages are written in JSX code typical for React.js
Hot import from NPM
Import modules to your component with ease, if needed.
Optimize your site to promote it on search engines
One step to complete your project or host it on your own server: 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
If needed, you can create a GitHub repository for your project and commit changes.
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
In the Quarkly editor, you can monitor all the entities that are present on the page.
Component code or page errors can be detected in the debug console.
Tooltips in the code
If you have doubts about how to spell a property, start typing, and the editor will auto-complete what you're writing.
Synched pages and code editor
All of the edits you make to the site are shown in the code and vice versa.
Work on projects with your teammates using the Quarkly collaboration tool, just send them an invite.
You can make a component act as a tag by setting the “as” property to the desired value.
You can edit the necessary attributes of elements in the code editor.
A separate property belonging to the “Image” element.
You can install different icons for different devices, and you can also set a unique background color for Windows 10.
Open graph and meta tags
These settings are meant for the correct display of your website in search engine results and social media
Set up user-friendly URLs to improve your site position in the search engines and increase the usability of the resource.
Robots.txt and sitemap.xml
These files are created automatically. But you can edit them the way you like.
We provide Quarkly for free as long as we can, and then the lowest price among competitors.Create project