Web page maker for startups.
Meet Quarkly.
Choose from one of many pre-made blocks. Use pre-made React components or build your own. Completely free — you should try it now
Create Project
Full control over the design.
Primitives
Essential building blocks modeled after HTML tags, like Text, Image, Box, and others.
Themes
You can make your site's design consistent by using themes.
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
Create a component from one or more objects on the page or from the Layer panel. Add copies of the component to the page, and they will inherit all the props.
Ready-made Content
Take advantage of the ready-made blocks such as maps, videos, pop-ups, and more
Customizing design with breakpoints
Your website is completely responsive to mobile devices by using different design solutions for elements at breakpoints.
Adding and editing breakpoints
Use your own breakpoints or choose one of the ones that are already there.
Drag'n'Drop
Element placement options include dragging and dropping, nesting, and arranging them however you like on the page.
Multiselect
This option allows you to select multiple elements and change their styles, place them on the page, etc.
Text editor
You can make parts of your text bold or italic, or turn them into links. The font face, size, and color are also up to you.
Deep select
The double click allows you to move up and down the hierarchy of elements. Hold down the Ctrl key on Windows or the Cmd key on a Mac to enter the hierarchy.
Support of Flexbox and Grid
Quarkly embraces the latest and greatest in frontend coding methods.
Configuring styles of pseudo-classes hover/active/focus, etc.
Simply enable "hover" and arrange the desired props to alter the appearance of an element, such as how it behaves on hover.
Google Fonts Connection
If you want your site design to look more professional, consider using a library of more than 990 font families.
Unsplash images
Select stunning images from the Unsplash library directly through the Quarkly interface.
Props panel
Take advantage of the categorized style and props.
Layout
This section allows you to configure the display properties of elements.
Typography
Use the special properties in this section to alter the text's style.
Indents
These settings offer options to change margins and paddings.
Background
This section has props you can use to set up element backgrounds.
Borders
Here you can adjust borders and border radius.
Position
This category lets you use position and z-index settings.
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
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
Import modules to your component from NPM in no time, if needed.
SEO
Optimize your site to promote it on search engines.
Export CRA
Your project can be finished or hosted on your server by exporting it into an archive using a create-react-app project.
Code Editor
Fine-tune elements in the code editor.
Export to Gatsby Project
You can export your projects to Gatsby — one of the most popular static site generators.
Pushing commits to your GitHub repository
Create a GitHub repository for your project and make commits with ease.
Publication on Netlify
When it's ready, publish your website on Netlify. It will automatically create a technical domain.
Modern built-in code editor
The editor shows each and every entity that is present on the page.
Debugger
Component code or page errors can be detected in the debug console.
Tooltips in the code
Start typing and the editor will auto-complete what you've written if you need help spelling a property.
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
Profit from the Quarkly collaboration tool by inviting your colleagues to work on a project with you.
Semantic tags
Make every component work as a tag by selecting the desired "as" property value.
Schema.org
In the code editor, you can provide items the required characteristics.
Image ALT
A unique attribute of the "Image" element.
Favicons
Get creative with device icons and tile background color on Windows 10 with this exclusive setup feature.
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
You may increase the SEO of your site by using clean URLs.
Robots.txt and sitemap.xml
These files are created automatically. But you can edit them as you think they fit in the future.
Web page maker for startups.
Try it for free.
We provide Quarkly for free as long as we can, and then the lowest price among competitors.
Create project