Unlimited customisation possibilities, no-code tools of a classic editor. Complete design control, supports Grid and Flexbox. Publish your website online or export it to GithubCreate Project
Website is composed of basic components similar to HTML tags such as Text, Image, and Вох.
Build a professional-looking design using themes
With stylish animations, effects, and transformations, you can make your web page more exciting.
Fine-tune your adaptive design
You can choose an element (or a group of elements) on the page and convert them into a component. Add copies to the page and they will inherit all the props.
Take advantage of the ready-made blocks such as maps, videos, pop-ups, and more
Customizing design with breakpoints
Rest assured your site is completely mobile-friendly by using different design solutions for elements at breakpoints.
Adding and editing breakpoints
You can use your own custom breakpoints, or select one of the existing ones.
Move elements around, place them however you want on the page, or nest them in other elements.
You can select multiple elements and modify their styles or drag'n'drop them to change their location.
You can edit part of the text making it bold or italic, turning it into a link or converting to span, as well as appyling any style to it.
Double-clicking the hierarchy of elements will take you up and down the element structure. If you want to get inside the structure, hold down the Ctrl key on Windows or the Cmd key on MacOs.
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 make an element appear differently, such as with a hover state, enable the "hover" prop and configure the desired props.
Google Fonts Connection
The library of over 990 font families will help make your site look more beautiful.
Make use of Unsplash, one of the most popular free image stocks where you can select images directly from the Quarkly interface
Make use of the categorized style and props to your advantage.
This section allows you to configure the display properties of elements.
To alter the appearance of your text, use the properties in this section.
Here you can configure margins and paddings, which control the space around elements.
Here you'll find some props to help you set up element backgrounds.
Here you can set up borders and border radius.
With this category, you can fine-tune element position and z-index settings.
With this property, you can make an element move smoothly from one state to another.
You can transform the element using this property, for instance, rotate or zoom.
Make custom React components in the code editor
With the Quarkly code editor, you can 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
You can import modules to your component from NPM in a few clicks.
Optimize your site to promote it on search engines
One of the final steps to complete your project is to export it into an archive with a create-react-app project.
Fine-tune elements in the code editor
Export to Gatsby Project
In no time, you can export your projects to Gatsby — one of the best open-source SSGs
Pushing commits to your GitHub repository
Want to create a GitHub repository for your project and commit changes there? Piece of cake!
Publication on Netlify
Publish your site on Netlify once it's ready. A technical domain will be created automatically for it, for example: https://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.
If you need help when spelling a property, start typing and the editor will auto-complete what you've written.
Synched pages and code editor
All edits you apply to the pages are shown in the code and vice versa.
Work on projects with your teammates using the Quarkly collaboration tool, just send them an invite.
All components can be used as a tag. Just select the tag's “as” property value.
You can specify desired attributes for elements in the code editor.
A special property 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
Configure these settings for the correct display of your website in search engine results and social media.
Make sure you use human-readable URLs to improve your site's SEO.
Robots.txt and sitemap.xml
These files are automatically generated. You can edit these files to suit your needs for the future.
We provide Quarkly for free as long as we can, and then the lowest price among competitors.Create project