Use pre-made React components or build your own. Choose from one of many pre-made blocks. All-in-one website builder on React — QuarklyCreate Project
Fundamental building blocks resembling HTML tags, such as Text, Image, and Box.
Using themes you can create a consistent design for your site
Boost your websites' functionality with distinctive layouts, animations, effects, and transformations.
Fine-tune your adaptive design
Choose an element or elements on the page or Layer panel, convert them into a component, and add copies to the page for seamless inheritance of all properties.
Add premade blocks, including videos, pop-ups, maps, and more.
Customizing design with breakpoints
Make sure your site is 100% adaptive by using different design solutions for elements at breakpoints.
Adding and editing breakpoints
You can change current breakpoints in the project theme or add new ones.
You can place elements wherever you want on a page — that's up to you. You can drop them in the desired area, or nest them in other ones.
You have the option to format multiple elements at once, move multiple elements around the document, or remove multiple elements from their current position.
You can link certain passages of text, make them bold or italic, or both. You can choose the font face, size, and color as well.
You can move through the elemental hierarchy by double clicking. Hold down the Ctrl key on Windows or the Cmd key on MacOs to enter the hierarchy.
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 element appearance, for example, the way it behaves on hover, enable "hover" and apply the desired props.
Google Fonts Connection
Make your website look more vibrant by using fonts from a library with over 990 font families.
From the Quarkly interface, browse the Unsplash image library and select the images you require.
Style and utility characteristics are categorized here.
Check out this section to use element display properties.
To alter the appearance of your text, use the properties in this section.
To configure margins and paddings, open these settings.
This section contains props that help you create element backgrounds.
The properties for borders and border radius can be found here.
You can change the element position and z-index settings in this category.
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 create your own React components using the Quarkly code editor and then add them to the page.
The pages are written in JSX code typical for React.js.
Hot import from NPM
Quickly import modules to your component from NPM when needed.
Optimize your site to promote it on search engines.
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.
Fine-tune elements in the code editor.
Export to Gatsby Project
You can easily export your projects to Gatsby, which is a popular static site generator.
Pushing commits to your GitHub repository
Create a GitHub repository for your project and make commits with ease.
Publication on Netlify
Once your site is ready, you can publish it on Netlify with a technical domain name such as https://inspiring-beaver-d128ed.netlify.app.
Modern built-in code editor
In the Quarkly editor, you can keep an eye on each thing on the page.
The debug console shows errors in the component code or pages.
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 code and the pages are merged, so your changes to the code are visible in the page and vice versa.
Take advantage of the Quarkly collaboration tool: work on a project together with your teammates, just send them an invite.
Any element can serve as a tag. Simply choose the required "as" property value.
You can specify desired attributes for elements in the code editor.
A special property of the “Image” element.
Get creative with device icons and tile background color on Windows 10 with this exclusive setup feature.
Open graph and meta tags
Make sure your website stands out in search engine results and social media with these display settings.
Use human-readable URLs to increase the SEO of your website.
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