Website editor for prototype designers.
Meet Quarkly.
Publish your website online or export it to Github. Use pre-made React components or build your own. Get all the power of graphic design tools and website builders
Create Project
Ultimate control over the design.
Primitives
These are the most basic components similar to HTML tags: Text, Image, Вох, and others.
Themes
Themes make it easy to create a consistent look for your website.
Extended Styling
Add a touch of flair to your site with unique layouts, eye-popping animations, and breathtaking transformations.
Adaptive design
Fine-tune your adaptive design
Components
On the page or on the Layer panel, choose an element (or a group of elements) and convert them into a component. Add component copies to the page. All the props will be inherited.
Ready-made Content
To improve your website, use the pre-made blocks, which include videos, pop-ups, maps, and more.
Customizing design with breakpoints
Guarantee a 100% adaptive website by using design solutions that cater to elements at breakpoints.
Adding and editing breakpoints
Add your own breakpoints or modify existing ones in the project theme.
Drag'n'Drop
You can align or stack elements however you want and drop them on any area of the page, or nest them in other elements.
Multiselect
You can select multiple elements and modify their styles or drag'n'drop them to change their location.
Text editor
Bold, italic, link, span, and other styles, all options to make your text stand out.
Deep select
Use the double click to move up and down the hierarchy of elements in your document. If you need to go inside the hierarchy, hold down the Ctrl key on Windows and the Cmd key on MacOs.
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.
To change the element appearance, for example, the way it behaves on hover, enable "hover" and apply 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
Use Unsplash, a top-rated free image stock, to search for images and select them directly from Quarkly.
Props panel
Take advantage of the categorized style and props.
Layout
Get access to element display properties in this section.
Typography
Browse text style properties in this section
Indents
Margin and padding configuration is available here.
Background
In this section, you can find props for element backgrounds.
Borders
Here you can adjust borders and border radius.
Position
Here, element position and z-index can be adjusted through these settings.
Transition
An element can transition from one state to another without interruption thanks to this property.
Transform
You can use this property to transform the element, for example, rotate or zoom.
Development capabilities.
Supercharged.
Create custom React components using the code editor
In Quarkly, the code editor provides the ability to build unique React components and add them to the page.
React.js
The pages are written in JSX code typical for React.js.
Hot import from NPM
Import modules from NPM to your component quickly and easily.
SEO
Optimize your site to promote it on search engines.
Export CRA
If you need to complete or host your project on your own server, it's easy: just export it into an archive with a create-react-app project.
Code Editor
Fine-tune elements in the code editor.
Export to Gatsby Project
With just a few clicks, export your projects to Gatsby, a well-known static site generator.
Pushing commits to your GitHub repository
Want to add modifications to a GitHub repository you've created for your project? Well, you can. With Quarkly.
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
All of the page's entities can be found in the Quarkly editor.
Debugger
Monitor component code and page errors using the debug console.
Tooltips in the code
If you're unsure how to spell a property, start typing and the editor will provide suggestions.
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.
Fantastic opportunities for business.
Collaboration
Take advantage of the Quarkly collaboration tool: work on a project together with your teammates, just send them an invite.
Semantic tags
Each component can act as a tag. Just select the desired value of the “as” property.
Schema.org
You can give elements the desired attributes through the code editor.
Image ALT
A unique attribute that belongs to the "Image" element.
Favicons
This feature allows you to install icons for all devices and change the background color of individual tiles in Windows 10.
Open graph and meta tags
Optimize the display of your site in search engine results and on social media with these settings.
User-friendly URL
Create user-friendly URLs to boost the usability of the resource and the ranking of your site in the search engines.
Robots.txt and sitemap.xml
These files are created automatically. But you can edit them as you think they fit in the future.
Website editor for prototype designers.
Try it for free.
We provide Quarkly for free as long as we can, and then the lowest price among competitors.
Create project