Website editor for low-code developers.
Meet Quarkly.
Complete design control, supports Grid and Flexbox. Visual interface, adaptive design settings, code editor, React components, all possibilities of CSS. Completely free — you should try it now
Create Project
Full control over the design.
Primitives
Primitive content components work like HTML tags. For example, Text, Image, and Вох.
Themes
Create a consistent and professional-looking design with the help of themes.
Extended Styling
Give your website the edge it deserves with innovative layouts, engaging animations, and transforming effects.
Adaptive design
Fine-tune your adaptive design
Components
Make a component out of a single element or a collection of elements on the page or in the Layers panel. All of the props will be inherited by component copies that are added to the page.
Ready-made Content
Add maps, videos, pop-ups, and more to your site with ready-made blocks.
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
Add your own breakpoints or modify existing ones in the project theme.
Drag'n'Drop
Elements can be moved around, positioned however you like on the page, or nested inside other elements.
Multiselect
You can select multiple elements and modify their styles or drag'n'drop them to change their location.
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
Double-click the elements to move up and down in their hierarchical order. Hold down the Ctrl key on Windows or the Cmd key on Mac OS to descend into the hierarchy.
Support of Flexbox and Grid
At Quarkly, we keep up with the up-to-date frontend coding approaches.
Configuring styles of pseudo-classes hover/active/focus, etc.
By activating the "hover" prop and positioning the desired props, you can change how an element appears, for example in a hover state.
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
Quarkly is integrated with Unsplash, a high-quality image stock that makes it easy to find and use great photos.
Props panel
Here you will find categorized style and functional properties.
Layout
Under this section, you can find element display properties.
Typography
Here you'll find text style properties that can be applied to your text.
Indents
To configure margins and paddings, open these settings.
Background
This section has props you can use to set up element backgrounds.
Borders
You can change the border radius and borders in this section.
Position
You can change the element position and z-index settings in this category.
Transition
With this property, you can make an element move smoothly from one state to another.
Transform
With this property, you can transform the element, for instance, rotate or zoom.
Development capabilities.
Supercharged.
Create custom React components using the code editor
In the Quarkly code editor, you can create your own React components and then add them to the page.
React.js
The pages are written in JSX code typical for React.js.
Hot import from NPM
Import modules to your component with ease, if needed.
SEO
Optimize your site to promote it on search engines.
Export CRA
One step to complete your project or host it on your own 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
One of the most well-liked static site generators, Gatsby, is one to which you can export your projects.
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
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 monitor all the entities that are present on the page.
Debugger
Keep an eye on component code and page errors with the help of the debug console.
Tooltips in the code
Start typing and the editor will give you a list of suggestions.
Synched pages and code editor
Every change you make to a page is reflected in the code, and vice versa.
Wonderful opportunities for business.
Collaboration
Send your coworkers an invitation to collaborate with you on a project using the Quarkly collaboration tool.
Semantic tags
Any part can serve as a tag. Just choose the "as" property's desired value.
Schema.org
In the code editor, you can add attributes to elements as necessary.
Image ALT
This particular property is a part of the "Image" element.
Favicons
This feature helps you to install unique icons for all devices.
Open graph and meta tags
These options are designed to ensure that your website appears properly in search engine results and on social media.
User-friendly URL
You may increase the SEO of your site by using clean URLs.
Robots.txt and sitemap.xml
You can further change these automatically generated files.
Website editor for low-code developers.
Try it for free.
We provide Quarkly for free as long as we can, and then the lowest price among competitors.
Create project