Website maker for frontend coders.
Meet Quarkly.
Create your website from scratch or ready-to-use templates. Unlimited customisation possibilities, no-code tools of a classic editor. Choose from one of many pre-made blocks
Create Project
Total control over the design.
Primitives
Basic elements that resemble HTML tags: Text, Image, Box, and others.
Themes
Build a professional-looking design using themes
Extended Styling
By including unique layouts, animations, effects, and transformations, you can increase the usefulness of your websites.
Adaptive design
Fine-tune your adaptive design
Components
Choose an element or a group of elements on the page or on the Layer panel and turn them into a component. Add component copies to the page and they will inherit all the props.
Ready-made Content
Take advantage of the ready-made blocks such as maps, videos, pop-ups, and more
Customizing design with breakpoints
Guarantee a 100% adaptive website by using design solutions that cater to elements at breakpoints.
Adding and editing breakpoints
Add your own breakpoints or modify existing ones in the project theme.
Drag'n'Drop
The choice is yours on how to arrange elements on the page — nest them, move them, or drop them in the desired area.
Multiselect
You can select multiple elements and move them to another location, remove them, and more.
Text editor
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.
Deep select
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
The most cutting-edge methods of front-end coding are supported by Quarkly.
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
If you want your site design to look more professional, consider using a library of more than 990 font families.
Unsplash images
One of the most well-liked free photo sites is Unsplash. From the Quarkly interface, you can search for and choose images.
Props panel
Enjoy the convenience of having categorized style and functional properties at your fingertips.
Layout
Here you can change the way elements appear.
Typography
Check out this section to take advantage of text style properties.
Indents
Adjust margins and paddings with ease in these settings.
Background
Here, you will have access to props for element background setup.
Borders
The properties for borders and border radius can be found here.
Position
In this category, you can change the settings for element position and z-index.
Transition
This property helps an element move smoothly from one state to another.
Transform
You can use this property to transform the element, for example, rotate or zoom.
Development capabilities.
Supercharged.
Create custom React components using the code editor
The Quarkly code editor allows you to create unique React components and then place them on the page.
React.js
The pages are written in JSX code typical for React.js.
Hot import from NPM
You can import modules to your component from NPM.
SEO
Optimize your site to promote it on search engines.
Export CRA
There is just one thing to do if you want to finish or host your project on your server: export it into an archive with a create-react-app project!
Code Editor
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
Making a GitHub repository for your project and committing changes can be done with ease.
Publication on Netlify
When your site is complete, publish it on Netlify for an automatically generated technical domain, like https://inspiring-beaver-d128ed.netlify.app.
Modern built-in code editor
The Quarkly editor lets you see all the entities that are present on the page.
Debugger
You can track issues in the component code and pages with the aid of our debug console.
Tooltips in the code
The editor is here to help with property spelling — just start typing.
Synched pages and code editor
The code and the pages are merged, so your changes to the code are visible in the page and vice versa.
Incredible opportunities for business.
Collaboration
Work on projects with your teammates using the Quarkly collaboration tool, just send them an invite.
Semantic tags
Any element can serve as a tag. Simply choose the required "as" property value.
Schema.org
You can set attributes to elements in the code editor.
Image ALT
The "Image" element has a distinct property for this.
Favicons
Install distinctive device icons and a customized Windows tile backdrop color.
Open graph and meta tags
Make sure your website stands out in search engine results and social media with these display settings.
User-friendly URL
You may increase the SEO of your site by using clean URLs.
Robots.txt and sitemap.xml
Automated file creation with the option to edit as desired.
Website maker for frontend coders.
Try it for free.
We provide Quarkly for free as long as we can, and then the lowest price among competitors.
Create project