Website editor for product designers.
Meet Quarkly.
Use pre-made React components or build your own. Visual interface, adaptive design settings, code editor, React components, all possibilities of CSS. Completely free — you should try it now
Create Project
Full creative control of your design.
Primitives
These are the fundamental elements, which are similar to HTML tags: Text, Image, Box, and others.
Themes
Themes make it easy to create a consistent look for your website.
Extended Styling
Make your websites more useful by adding original layouts, 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
Add ready-made blocks: maps, videos, pop-ups, and many more
Customizing design with breakpoints
Ensure your website is fully responsive by using tailored design solutions for elements at breakpoints.
Adding and editing breakpoints
You can customize the breakpoints in your project theme by adding or editing them.
Drag'n'Drop
You decide where to place the elements. Move them wherever you want, or nest them in other elements.
Multiselect
Use the multi-element selection tool to set styles, move, remove, or take other actions on multiple elements.
Text editor
Edit the text in any way you like, make it bold or italic, create a link, convert to span, and apply any style.
Deep select
Click twice to go up and down the hierarchy of elements. If you need to get inside the hierarchy, hold down Ctrl on Windows or Cmd 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 alter how an element appears, for instance in a hover state, activate the "hover" prop and arrange the desired props.
Google Fonts Connection
To make your site design look more professional go and use a library of more than 990 font families.
Unsplash images
Utilize Unsplash, one of the most widely used free image banks, to choose images directly from the Quarkly interface.
Props panel
Enjoy categorized style and functional properties.
Layout
Element display properties can be found here.
Typography
You can change text styles by using special properties in this section.
Indents
Adjust margins and paddings with ease in these settings.
Background
This section offers props for setting up element backgrounds.
Borders
Here you can adjust borders and border radius.
Position
You can modify the settings for element position and z-index in this category.
Transition
This property makes an element transit smoothly from one state to another.
Transform
This property allows you to transform the element, for example, rotate or zoom.
Development capabilities.
Supercharged.
Create custom React components using the code editor
Custom React components can be made in Quarkly's code editor and then inserted onto the page.
React.js
The pages are written in JSX code typical for React.js.
Hot import from NPM
It has never been simpler to import modules from NPM into your component.
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
Your projects can be easily exported to Gatsby, a well-liked static site generator.
Pushing commits to your GitHub repository
Create a GitHub repository for your project and make commits with ease.
Publication on Netlify
Publish your site on Netlify once it's ready. A technical domain will be created automatically for it, for example: 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
Monitor component code and page errors using 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
The code and the pages are merged, so your changes to the code are visible in the page and vice versa.
Remarkable opportunities for business.
Collaboration
Make teamwork a breeze with the Quarkly collaboration tool, just send an invite to your coworkers.
Semantic tags
You can use every component as a tag. Just choose the “as” property value that you need.
Schema.org
In the code editor, you can assign necessary attributes to elements.
Image ALT
This is an individual property that belongs to the “Image” element.
Favicons
Install unique icons for different devices and individual tile background color for Windows 10.
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
This feature allows you to set friendly URLs for your pages.
Robots.txt and sitemap.xml
Automatically generated files open for your editing and personalization.
Website editor for product designers.
Try it for free.
We provide Quarkly for free as long as we can, and then the lowest price among competitors.
Create project