Website editor for full stack coders.
Meet Quarkly.
Create your website from scratch or ready-to-use templates. Completely free — you should try it now. Publish your website online or export it to Github
Create Project
Full control over the design.
Primitives
Website is composed of basic components similar to HTML tags such as Text, Image, and Вох.
Themes
Themes can help you design your website consistently.
Extended Styling
Add some flash to your web pages with stylish animations, effects, and transformations.
Adaptive design
Fine-tune your adaptive design
Components
Any combination of elements on the page or in a layer can be used to create reusable components. The component inherits all of its original properties when you add it to a page.
Ready-made Content
Get creative with ready-made blocks: maps, videos, pop-ups, and much more.
Customizing design with breakpoints
Your website is designed to look great on all devices, including tablets and smartphones.
Adding and editing breakpoints
In the project theme, you can modify already-existing breakpoints or add new ones.
Drag'n'Drop
Elements can be dropped anywhere on the page, stacked however you like, and nested inside other elements.
Multiselect
Take control of multiple elements by selecting them and setting styles, moving, deleting, or doing more.
Text editor
If needed, you can change part of the text into bold or italic, link or convert it to span, or edit its style.
Deep select
Use the double click to move up and down the hierarchy of elements in your document. If you need to go inside the hierarchy, hold down the Ctrl key on Windows and the Cmd key on MacOs.
Support of Flexbox and Grid
Quarkly supports the most modern methods of frontend coding.
Configuring styles of pseudo-classes hover/active/focus, etc.
To change the appearance of an element, such as changing its behavior on hover, just enable "hover" and set up the desired props.
Google Fonts Connection
Make your website design more expressive by connecting fonts from a library with more than 990 font families.
Unsplash images
Use Unsplash, one of the most popular free image stocks that provide images you can use directly without downloading.
Props panel
This provides categorized functional and stylistic attributes.
Layout
This section allows you to configure the display properties of elements.
Typography
You can apply the text style properties found here to your text.
Indents
Here you can configure margins and paddings, which control the space around elements.
Background
Props for element backgrounds can be found in this section.
Borders
You can change the border radius and borders in this section.
Position
This category lets you fine-tune element position and z-index settings.
Transition
This property makes an element move smoothly from one state to another.
Transform
This property allows you to manipulate the element, such as by rotating or zooming.
Development capabilities.
Supercharged.
Create custom React components using the code editor
You can design distinctive React components in the Quarkly code editor and then insert them on the page.
React.js
The pages are written in JSX code typical for React.js.
Hot import from NPM
Quickly import modules to your component from NPM when needed.
SEO
Optimize your site to promote it on search engines.
Export CRA
One of the final steps to complete your project is to export it into an archive with a create-react-app project.
Code Editor
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 store your project in a GitHub repository and make changes to it.
Publication on Netlify
Once everything is complete, publish your website on Netlify using a technical domain name.
Modern built-in code editor
In the Quarkly editor, you can keep an eye on each thing on the page.
Debugger
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
When you edit a page, the changes are applied to the code and vice versa.
Fantastic opportunities for business.
Collaboration
Collaborate with your team on a project using Quarkly. Just send them an invite and get to work!
Semantic tags
Transform components into tags with ease by choosing the right "as" property value.
Schema.org
You can set attributes to elements in the code editor.
Image ALT
A special property of the “Image” element.
Favicons
This feature helps you to install unique icons for all devices.
Open graph and meta tags
These settings will help your website look its best on social networks and in search engines.
User-friendly URL
You may create user-friendly page URLs with this capability.
Robots.txt and sitemap.xml
You can further change these automatically generated files.
Website editor for full stack coders.
Try it for free.
We provide Quarkly for free as long as we can, and then the lowest price among competitors.
Create project