All-in-one website builder on React — Quarkly. Publish your website online or export it to Github. Complete design control, supports Grid and FlexboxCreate Project
Basic elements that resemble HTML tags: Text, Image, Box, and others.
Themes make it easy to create a consistent look for your website.
Make your websites more useful by adding original layouts, animations, effects, and transformations.
Fine-tune your adaptive design
Transform an element or group of elements on the page or Layer panel into a component. Add copies to the page and they will inherit all properties.
Use the ready-made blocks such as maps, videos, pop-ups, and more to enhance your site.
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
Use your own breakpoints or choose one of the ones that are already there.
Element placement options include dragging and dropping, nesting, and arranging them however you like on the page.
You can select multiple elements to set their styles, drag'n'drop them to another place, remove, etc.
Any style, a hyperlink, a span, an italicized or bolded section of the text, or other formatting options are available.
With the double click, you can go up and down the hierarchy of elements. If you need to get inside the hierarchy, hold down the Ctrl key on Windows and the Cmd key on MacOs.
Support of Flexbox and Grid
The most cutting-edge methods of front-end coding 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
By incorporating fonts from a collection of more than 990 font families, you can give your website design more expression.
Use Unsplash, a top-rated free image stock, to search for images and select them directly from Quarkly.
This provides categorized functional and stylistic attributes.
You can set the element display properties in this section.
Go to this section to find text style properties.
These settings offer options to change margins and paddings.
The section contains props that enable you to set element backgrounds.
The properties for borders and border radius can be found here.
In this category, you can change the settings for element position and z-index.
Elements can easily transition from one state to another thanks to this property.
This property allows you to transform the element, for example, rotate or zoom.
Create custom React components using the code editor
You can build custom React components in the Quarkly code editor and after that add them to the page.
The pages are written in JSX code typical for React.js.
Hot import from NPM
Importing modules from NPM to your component is a breeze.
Optimize your site to promote it on search engines.
If you want to finish or host your project on your server, you can export it into an archive with a create-react-app project
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
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.
Mistakes in the component code can be identified in the debug console.
Tooltips in the code
Don't let spelling uncertainties hold you back — start typing and the editor will guide you.
Synched pages and code editor
Any adjustments you make to the pages will also be reflected in the code, and vice versa.
Collaborate with your team on a project using Quarkly. Just send them an invite and get to work!
Each and every component can behave as a tag. Just choose the needed value of the “as” property.
You can customize elements with the necessary attributes in the code editor.
This is an individual property that belongs to the “Image” element.
Make your devices stand out with unique icons and personalized tile background color on Windows 10.
Open graph and meta tags
Make sure your website stands out in search engine results and social media with these display settings.
You may create user-friendly page URLs with this capability.
Robots.txt and sitemap.xml
These files are automatically produced. However, you are free to modify them as you see fit in the future.
We provide Quarkly for free as long as we can, and then the lowest price among competitors.Create project