Publish your website online or export it to Github. Unlimited customisation possibilities, no-code tools of a classic editor. Choose from one of many pre-made blocksCreate Project
Website is composed of basic components similar to HTML tags such as Text, Image, and Вох.
Create a professional-looking design easily by using themes.
Enhance the functionality of your websites with unique layouts, animations, effects, and transformations.
Fine-tune your adaptive design
On the page or on the Layer panel, choose an element (or a group of elements) and convert them into a component. Add component copies to the page. All the props will be inherited.
Enhance your page with ready-made blocks including maps, videos, pop-ups, 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.
You can move the elements wherever you want. Nest them in other elements, or leave them as they are.
Use the multi-select feature to apply styles, move, remove, or perform other actions on multiple elements.
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.
Double-click to go up and down the hierarchy of elements. To dive into the hierarchy, hold down the Ctrl key on Windows and the Cmd key on MacOs.
Support of Flexbox and Grid
Advanced frontend coding is at the forefront of Quarkly's approach.
Configuring styles of pseudo-classes hover/active/focus, etc.
To make an element appear differently, such as with a hover state, enable the "hover" prop and configure the desired props.
Google Fonts Connection
Make your website look more vibrant by using fonts from a library with over 990 font families.
One of the most well-liked free photo sites is Unsplash. From the Quarkly interface, you can search for and choose images.
Enjoy the convenience of having categorized style and functional properties at your fingertips.
In this section, you can configure element display properties.
Here you'll find text style properties that can be applied to your text.
To configure margins and paddings, open these settings.
This section contains props for setting up element backgrounds.
Here you can configure 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.
Use this property to seamlessly transform your element, for example, by rotating or zooming.
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
Import modules from NPM quickly, if you need to.
Optimize your site to promote it on search engines.
Your project can be finished or hosted on your server by exporting it into an archive using a create-react-app project.
Fine-tune elements in the code editor.
Export to Gatsby Project
One of the best open-source SSGs, Gatsby, may be used to export your projects in no time.
Pushing commits to your GitHub repository
Want to add modifications to a GitHub repository you've created for your project? Well, you can. With Quarkly.
Publication on Netlify
Once everything is complete, publish your website on Netlify using a technical domain name.
Modern built-in code editor
All of the page's entities are visible in the editor.
Errors in the component code or pages will show up in the debug console.
Tooltips in the code
If you're unsure about how to spell a particular attribute, just start typing, and the editor will correct you.
Synched pages and code editor
No matter what changes are made to the pages or code, both are always in sync.
Benefit from the Quarkly collaboration tool: work on a project with your team by just sending them an invite.
Each and every component can behave as a tag. Just choose the needed value of the “as” property.
You can set attributes to elements in the code editor.
The "Image" element has a unique property.
Customize your device icons and set individual tile background color on Windows 10.
Open graph and meta tags
These settings will help your site display correctly on social networks and in search engines.
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 as you see fit.
We provide Quarkly for free as long as we can, and then the lowest price among competitors.Create project