Complete design control, supports Grid and Flexbox. Completely free — you should try it now. All-in-one website builder on React — QuarklyCreate Project
These are the most basic components similar to HTML tags: Text, Image, Box, and others.
Create a professional-looking design easily by using themes.
Bring life into your web page with stylish animations, effects, and transformations.
Fine-tune your adaptive design
You can choose an element (or a group of elements) on the page and convert them into a component. Add copies to the page and they will inherit all the props.
With pre-made blocks, you can add maps, videos, pop-ups, and more to your website.
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
In the project theme, you can modify already-existing breakpoints or add new ones.
Elements can be dropped anywhere on the page, stacked however you like, and nested inside other elements.
This option allows you to select multiple elements and change their styles, place them on the page, etc.
Style text as desired, make it bold or italic, turn it into a link or convert it to span, the choice is yours.
Quickly traverse the hierarchy of elements by double clicking, and hold Ctrl/Cmd to delve into it.
Support of Flexbox and Grid
We're thrilled to provide you with the top frontend coding techniques available.
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
To make your site design look more professional go and use a library of more than 990 font families.
Select stunning images from the Unsplash library directly through the Quarkly interface.
Make use of the categorized style and props to your advantage.
Here you will find the element display properties.
Use the properties in this section to change the text's appearance.
You can modify the padding and margins using these settings.
This section contains props that help set element backgrounds.
Here you can configure borders and border radius.
This category allows you to position elements and set their z-index values.
Elements can easily transition from one state to another thanks to this property.
With the help of this property, you can rotate or zoom the element.
Create custom React components using the code editor
You can design distinctive React components in the Quarkly code editor and then insert them on the page.
The pages are written in JSX code typical for React.js.
Hot import from NPM
Import modules from NPM to your component quickly and easily.
Optimize your site to promote it on search engines.
If you want to finish or host your project on your server, there is only one thing you need to do: export it as an archive using a create-react-app project.
Fine-tune elements in the code editor.
Export to Gatsby Project
You can export your projects to Gatsby — one of the best open source Static Site Generators.
Pushing commits to your GitHub repository
Want to add modifications to a GitHub repository you've created for your project? Well, you can. With Quarkly.
Publication on Netlify
When your site is ready, publish it on Netlify with a technical domain name such as https://inspiring-beaver-d128ed.netlify.app.
Modern built-in code editor
All of the page's entities can be found in the Quarkly editor.
Errors in the component code or pages can be seen in the debug console.
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
All changes made to the pages are displayed in the code and vice versa.
Utilize the Quarkly collaboration tool to work on a project with your teammates; all you need to do is invite them.
All components can be used as a tag. Just select the tag's “as” property value.
You can edit the necessary attributes of elements in the code editor.
The "Image" element has a unique property.
This feature allows you to install icons for all devices and change the background color of individual tiles in Windows 10.
Open graph and meta tags
Get the right display for your website in search engines and social media through these settings.
This feature allows you to set friendly URLs for your pages.
Robots.txt and sitemap.xml
These files are created automatically. But you can edit them the way you like.
We provide Quarkly for free as long as we can, and then the lowest price among competitors.Create project