Web page maker for React coders.
Meet Quarkly.
Complete design control, supports Grid and Flexbox. Completely free — you should try it now. All-in-one website builder on React — Quarkly
Create Project
Ultimate control over the design.
Primitives
These are the most basic components similar to HTML tags: Text, Image, Вох, and others.
Themes
It's simple to give your website a unified look with themes.
Extended Styling
Bring life into your web page with stylish animations, effects, and 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
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 custom breakpoints or choose one of the existing ones.
Drag'n'Drop
Move elements around, place them however you want on the page, or nest them in other elements.
Multiselect
You can drag and drop multiple elements to a different location, remove them, or change their styles while they are selected.
Text editor
If needed, you can change part of the text into bold or italic, link or convert it to span, or edit its style.
Deep select
If you need to go up and down the hierarchy of elements, double-click them. If you want to dive into the hierarchy, hold down the Ctrl key on Windows and the Cmd key on MacOs.
Support of Flexbox and Grid
At Quarkly, we support the latest and greatest in frontend coding.
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
Make your website design look sleek and modern with the library of over 990 font families.
Unsplash images
Browse the Unsplash image collection and choose those you need directly from the Quarkly interface.
Props panel
Here you will find categorized style and functional properties.
Layout
You can find the element display properties under this section.
Typography
Here you'll find text style properties that can be applied to your text.
Indents
Margin and padding configuration is available here.
Background
Props in this section help create the backgrounds for the elements.
Borders
Here you can configure border and border radius.
Position
You can modify the settings for element position and z-index in this category.
Transition
This property makes an element transition smoothly from one state to another.
Transform
This property gives you the power to transform your element in a variety of ways, like rotating or zooming.
Development capabilities.
Supercharged.
Create custom React components using the code editor
In the Quarkly code editor, you can create your own React components and then add them to the page.
React.js
The pages are written in JSX code typical for React.js.
Hot import from NPM
You can easily import modules from NPM to your component.
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
One of the best open-source SSGs, Gatsby, may be used to export your projects in no time.
Pushing commits to your GitHub repository
If you need, you can create a GitHub repository for your projects and commit changes.
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
The Quarkly editor allows you to see all the entities on the page.
Debugger
When there are errors in the component code or pages, they can be seen in the debug console.
Tooltips in the code
Start typing if you're unsure of how to spell a word, and the editor will fill in the blanks 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.
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
Make every component work as a tag by selecting the desired "as" property value.
Schema.org
You can give elements the desired attributes through the code editor.
Image ALT
This is an individual property that belongs to 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
Configure these settings to display your website correctly in search engine results and social media.
User-friendly URL
Make sure you use human-readable URLs to improve your site's SEO.
Robots.txt and sitemap.xml
These files are there for you to use. But you can change them and add to them as you see fit.
Web page maker for React coders.
Try it for free.
We provide Quarkly for free as long as we can, and then the lowest price among competitors.
Create project