Website editor for frontend coders.
Meet Quarkly.
Visual interface, adaptive design settings, code editor, React components, all possibilities of CSS. Completely free — you should try it now. Create your website from scratch or ready-to-use templates
Create Project
Ultimate control over the design.
Primitives
Basic components with a similarity to HTML tags, like Text, Image, Box, and others.
Themes
Create a professional-looking design easily by using themes.
Extended Styling
Add some flash to your web pages with stylish animations, effects, and transformations.
Adaptive design
Fine-tune your adaptive design
Components
On the page, you can select an element (or a collection of elements) and turn them into a component. All the props will be passed on to copies that are added to the page.
Ready-made Content
To improve your website, use the pre-made blocks, which include videos, pop-ups, maps, and more.
Customizing design with breakpoints
Check out your 100% adaptive website by using different design solutions for elements and breakpoints.
Adding and editing breakpoints
Customize or edit breakpoints in the project theme as desired.
Drag'n'Drop
Elements can be dropped anywhere on the page, stacked however you like, and nested inside other elements.
Multiselect
You can select multiple elements and set their styles, drag to another place, remove, and more.
Text editor
You can link certain passages of text, make them bold or italic, or both. You can choose the font face, size, and color as well.
Deep select
To move through the elemental hierarchy, double-click. Hold down the Ctrl key on Windows or the Cmd key on Mac OS to enter the hierarchy.
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 appearance of an element, for example, the way it behaves on hover, just enable "hover" and set up the desired props.
Google Fonts Connection
Use fonts from a library that has over 990 font families in it to make your website look more colorful.
Unsplash images
Browse Unsplash's collection of free images and choose directly from the Quarkly interface.
Props panel
Enjoy categorized styles and functional properties in a friendly interface.
Layout
Check out this section to use element display properties.
Typography
You can change text styles by using special properties in this section.
Indents
To configure margins and paddings, open these settings.
Background
The section contains props that enable you to set element backgrounds.
Borders
Here you can configure border and border radius.
Position
This category helps you configure the position and z-index settings of elements.
Transition
Elements can easily transition from one state to another thanks to this property.
Transform
This property can be used to rotate or zoom the element, for example.
Development capabilities.
Supercharged.
Create custom React components using the code editor
With the Quarkly code editor, you can 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
Simply export it as an archive using a create-react-app project if you need to finish or host your project on your own server.
Code Editor
Fine-tune elements in the code editor.
Export to Gatsby Project
Export your projects to Gatsby, one of the most well-known web frameworks for static site generation.
Pushing commits to your GitHub repository
You can build a GitHub repository for your projects if necessary and commit updates there.
Publication on Netlify
When it's ready, publish your website on Netlify. It will automatically create a technical domain.
Modern built-in code editor
The editor displays all the entities of the page.
Debugger
When there are errors in the component code or pages, they can be seen in the debug console.
Tooltips in the code
If you're not sure how to spell a property, type the first few letters and the editor will complete it for you.
Synched pages and code editor
As you make changes to the pages, the changes display in the code and vice versa.
Fantastic opportunities for business.
Collaboration
Benefit from the Quarkly collaboration tool: work on a project with your team by just sending them an invite.
Semantic tags
All components can act as a tag. Just select the necessary “as” property value.
Schema.org
In the code editor, you can assign necessary attributes to elements.
Image ALT
The "Image" element has a unique property.
Favicons
Set up custom icons for all devices and individual tile 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
User-friendly URL
Make sure your site's URLs are human-readable to improve search engine optimization.
Robots.txt and sitemap.xml
These files are created automatically. But you can edit them the way you like.
Website editor 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