Website editor for product managers.
Meet Quarkly.
Get all the power of graphic design tools and website builders. Completely free — you should try it now. Choose from one of many pre-made blocks
Create Project
Absolute control over the design.
Primitives
Primitive content elements function similarly to HTML tags. For example, Text, Image, and Вох.
Themes
Themes make it easy to give your website a unified appearance.
Extended Styling
Boost your websites' functionality with distinctive layouts, animations, effects, and transformations.
Adaptive design
Fine-tune your adaptive design
Components
On the Layer panel, choose the element or group of elements you want to convert to a component. All of the props will be inherited if you add duplicates of the components to the page.
Ready-made Content
Additionally, you can include pre-made blocks like maps, videos, pop-ups, and much more.
Customizing design with breakpoints
Ensure your website is fully responsive by using tailored design solutions for elements at breakpoints.
Adding and editing breakpoints
Customize or edit breakpoints in the project theme as desired.
Drag'n'Drop
You can move the elements wherever you want. Nest them in other elements, or leave them as they are.
Multiselect
Use the multi-select feature to apply styles, move, remove, or perform other actions on multiple elements.
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
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 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
Let your website design express your brand's personality by connecting fonts from a library with more than 990 font families.
Unsplash images
Browse the Unsplash image collection and choose those you need directly from the Quarkly interface.
Props panel
This provides categorized functional and stylistic attributes.
Layout
This is where you can locate element display properties.
Typography
Explore text style properties here
Indents
You can modify the padding and margins in these settings.
Background
This section contains props that help you create element backgrounds.
Borders
Find the options for borders and border radius configuration in this section.
Position
This category helps you configure element position and z-index settings.
Transition
This property makes 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
You can create your own React components using the Quarkly code editor 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
To wrap up your project or host it on your server, simply export it into an archive using a create-react-app project.
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 create a GitHub repository for your project and commit changes.
Publication on Netlify
Once your site is ready, you can publish it on Netlify with a technical domain name like https://inspiring-beaver-d128ed.netlify.app.
Modern built-in code editor
The editor displays every entity on the page.
Debugger
In the debug console, component code or page errors might be found.
Tooltips in the code
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
Every change you make to a page is reflected in the code, and vice versa.
Stunning opportunities for business.
Collaboration
Send your coworkers an invitation to collaborate with you on a project using the Quarkly collaboration tool.
Semantic tags
All components can act as a tag. Just select the necessary “as” property value.
Schema.org
You can add necessary attributes to elements in the code editor.
Image ALT
A separate property belonging to the “Image” element.
Favicons
You can use unique icons for different devices and change the background color of Windows 10 tiles.
Open graph and meta tags
Use these settings for the correct display of your site on social networks and in search engines.
User-friendly URL
Get the best of both worlds with human-readable URLs that improve your site's SEO and usability.
Robots.txt and sitemap.xml
These files are automatically created. But you can edit them if necessary.
Website editor for product managers.
Try it for free.
We provide Quarkly for free as long as we can, and then the lowest price among competitors.
Create project