Website builder for frontend developers.
Meet Quarkly.
Complete design control, supports Grid and Flexbox. Create your website from scratch or ready-to-use templates. Completely free — you should try it now
Create Project
Total control over the design.
Primitives
Text, Image, Box — the most basic components similar to HTML tags.
Themes
Build a professional-looking design using themes
Extended Styling
By including unique layouts, animations, effects, and transformations, you can increase the usefulness of your websites.
Adaptive design
Fine-tune your adaptive design
Components
Select a single element or multiple elements on the page or Layer panel and convert them into a component. Place component copies on the page and enjoy the inheritance of all properties.
Ready-made Content
Place ready-made blocks on the page, for example, maps, videos, pop-ups, and more
Customizing design with breakpoints
Rest assured your site is completely mobile-friendly by using different design solutions for elements at breakpoints.
Adding and editing breakpoints
Customizing or editing breakpoints is possible in the project theme.
Drag'n'Drop
Arrange elements however you want on the page, drop them on the desired area, or nest them in other elements.
Multiselect
You have the option to format multiple elements at once, move multiple elements around the document, or remove multiple elements from their current position.
Text editor
You can change the appearance of text — for instance, making it bold or italic, turning it into a link, or converting it to a span—as well as apply any style to it.
Deep select
Double-clicking the hierarchy of elements will take you up and down the element structure. If you want to get inside the structure, hold down the Ctrl key on Windows or the Cmd key on MacOs.
Support of Flexbox and Grid
The most cutting-edge frontend coding techniques 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
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
Here you will find categorized style and functional properties.
Layout
Here you can find element display properties.
Typography
In this section, you can change text styles using special properties
Indents
To set margins and paddings, open these settings.
Background
This section consists of props for element backgrounds.
Borders
With these options, you can set up borders and border radius.
Position
The element position and z-index settings can be altered here.
Transition
This property makes an element transition smoothly from one state to another.
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
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
If necessary, quickly import modules into your component through NPM.
SEO
Optimize your site to promote it on search engines.
Export CRA
If your goal is to host a project on your server, here's the one thing you have to do: export it into an archive with a create-react-app project!
Code Editor
Fine-tune elements in the code editor.
Export to Gatsby Project
Export your projects to Gatsby, a highly regarded static site generator.
Pushing commits to your GitHub repository
Create a GitHub repository for your project and commit changes as you work.
Publication on Netlify
Publish your site on Netlify when it's ready. A technical domain will be generated automatically, for instance: https://inspiring-beaver-d128ed.netlify.app.
Modern built-in code editor
All of the page's entities are visible in the editor.
Debugger
Errors in the component code or pages can be seen in the debug console.
Tooltips in the code
Start typing and the editor will correct you if you don't know how to spell a particular property.
Synched pages and code editor
The pages and code maintain a dynamic relationship, showing any modifications made in both.
Amazing opportunities for business.
Collaboration
Share projects and work with your team members via Quarkly's collaboration tool. It's easy to use.
Semantic tags
All components can act as a tag. Just select the necessary “as” property value.
Schema.org
You can set desired attributes to elements in the code editor.
Image ALT
This particular property is a part of the "Image" element.
Favicons
You can install distinctive icons for every device and a custom tile backdrop color for Windows with this functionality.
Open graph and meta tags
Use these settings to ensure that your website appears as intended on social media and in search results.
User-friendly URL
You may increase the SEO of your site by using clean URLs.
Robots.txt and sitemap.xml
Automatically generated files open for your editing and personalization.
Website builder for frontend developers.
Try it for free.
We provide Quarkly for free as long as we can, and then the lowest price among competitors.
Create project