Web page editor for web engineers.
Meet Quarkly.
Create your website from scratch or ready-to-use templates. Complete design control, supports Grid and Flexbox. Get all the power of graphic design tools and website builders
Create Project
Absolute control over the design.
Primitives
Basic components which are similar to HTML tags like Text, Image, Box, and others.
Themes
Create a professional-looking design easily by using themes.
Extended Styling
Make your site stand out from the crowd with eye-catching layouts, animations, and transformations.
Adaptive design
Fine-tune your adaptive design
Components
Select an element or a group of elements on the Layer panel and turn it into a component. Add copies of the components to the page and all the props will be inherited.
Ready-made Content
Add premade blocks, including videos, pop-ups, maps, and more.
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
You can customize the breakpoints in your project theme by adding or editing them.
Drag'n'Drop
Place elements exactly where you want them on the page, whether it be by dropping them, nesting them, or moving them.
Multiselect
You can pick multiple elements, modify their styles, move them to a different location, delete them, and more.
Text editor
A portion of the text can be changed by applying any style, making it bold or italic, linking to it or making it a span.
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
At Quarkly, we support the latest and greatest in frontend coding.
Configuring styles of pseudo-classes hover/active/focus, etc.
To modify the look of an element, such as its hover appearance, simply enable "hover" and customize the properties.
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
Use Unsplash, a top-rated free image stock, to search for images and select them directly from Quarkly.
Props panel
Style and utility characteristics are categorized here.
Layout
Element display properties can be found here.
Typography
Explore text style properties here
Indents
Open these settings to configure margins and paddings.
Background
Props for element backgrounds can be found in this section.
Borders
This section allows you to configure borders and border radius.
Position
You can change the element position and z-index settings in this category.
Transition
This property makes an element transition smoothly from one state to another.
Transform
With the help of this property, you can rotate or zoom an element.
Development capabilities.
Supercharged.
Create custom React components using the code editor
Quarkly lets you design custom React components in the code editor and add them to 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 in a few clicks.
SEO
Optimize your site to promote it on search engines.
Export CRA
You can export a create-react-app project into an archive file that you can host on your own server.
Code Editor
Fine-tune elements in the code editor.
Export to Gatsby Project
You can export your projects to Gatsby, a popular static site generator (SSG).
Pushing commits to your GitHub repository
You can establish a GitHub repository for your project and submit updates there.
Publication on Netlify
Once it is complete, publish your website on Netlify. It will automatically generate a technical domain.
Modern built-in code editor
The editor displays every entity on the page.
Debugger
Mistakes in the component code can be identified 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
When you edit a page, the changes are applied to the code and vice versa.
Remarkable opportunities for business.
Collaboration
Send your coworkers an invitation to collaborate with you on a project using the Quarkly collaboration tool.
Semantic tags
Every component can act as a tag. Just choose the “as” property value that you need.
Schema.org
In the code editor, you can assign desired attributes to any element.
Image ALT
The "Image" element has a unique property.
Favicons
Set up exclusive icons for various devices and individual tile background color for Windows 10.
Open graph and meta tags
Set these options appropriately to ensure that your website appears as intended in social media and search engine results.
User-friendly URL
Use human-readable URLs to increase the SEO of your website.
Robots.txt and sitemap.xml
You can further change these automatically generated files.
Web page editor for web engineers.
Try it for free.
We provide Quarkly for free as long as we can, and then the lowest price among competitors.
Create project