Web page builder for entrepreneurs.
Meet Quarkly.
Use pre-made React components or build your own. Publish your website online or export it to Github. Complete design control, supports Grid and Flexbox
Create Project
Full control over the design.
Primitives
Primitive content elements function similarly to HTML tags. For example, Text, Image, and Вох.
Themes
Themes make it easy to create a consistent look for your website.
Extended Styling
Enhance the functionality of your websites with unique layouts, animations, effects, and transformations.
Adaptive design
Fine-tune your adaptive design
Components
On the Layer panel, choose the element or group of elements you want to convert to a component. All of the props will be inherited if you add duplicates of the components to the page.
Ready-made Content
You can also add ready-made blocks: maps, videos, pop-ups and much more.
Customizing design with breakpoints
Check out your 100% adaptive website by using different design solutions for elements and breakpoints.
Adding and editing breakpoints
Add your own breakpoints or modify existing ones in the project theme.
Drag'n'Drop
Drag and drop elements to arrange them on the page, 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
You can apply any style, make a portion of the text bold or italic, a link or span, or any other formatting.
Deep select
You can double-click to go up and down the hierarchy of your objects. If you need to get inside the hierarchy, hold down the Ctrl key on Windows or Cmd 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.
If you want to change the element look, for instance, how it appears on hover, enable "hover" and configure the desired props.
Google Fonts Connection
Use the library of over 990 font families to make your site look more beautiful
Unsplash images
Browse Unsplash's collection of free images and choose directly from the Quarkly interface.
Props panel
Here you will find categorized style and functional properties.
Layout
This is where you can locate element display properties.
Typography
To alter the appearance of your text, use the properties in this section.
Indents
In these settings, you can set margins and paddings.
Background
This section contains props that help set element backgrounds.
Borders
Here you can configure borders and border radius.
Position
This category contains settings for configuring the position and z-index of elements.
Transition
This property makes an element move 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
With the Quarkly code editor, you can create custom React components and then use them on a webpage.
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
You can export your project as an archive using a create-react-app project if you want to finish it or host it on your server.
Code Editor
Fine-tune elements in the code editor.
Export to Gatsby Project
Export your projects to Gatsby — one of the most famous static-site generation web frameworks
Pushing commits to your GitHub repository
Effortlessly, you can make a GitHub repository for your project and commit changes.
Publication on Netlify
Publish your website to Netlify once it is complete. Its technical domain name will be generated automatically.
Modern built-in code editor
The Quarkly editor contains all of the page's entities.
Debugger
The debug console shows errors in the component code or pages.
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
Profit from the Quarkly collaboration tool by inviting your colleagues to work on a project with you.
Semantic tags
You can make a component act as a tag by setting the “as” property to the desired value.
Schema.org
In the code editor, you can provide items the required characteristics.
Image ALT
An individual property is provided for the "Image" element.
Favicons
Make your devices stand out with unique icons and personalized tile background color on Windows 10.
Open graph and meta tags
Get the right display for your website in search engines and social media through these settings.
User-friendly URL
Make sure your site's URLs are human-readable to improve search engine optimization.
Robots.txt and sitemap.xml
Ready-made files available for customization and future editing.
Web page builder for entrepreneurs.
Try it for free.
We provide Quarkly for free as long as we can, and then the lowest price among competitors.
Create project