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
Basic elements that resemble HTML tags: Text, Image, Box, and others.
Themes can help you design your website consistently.
Make your site stand out from the crowd with eye-catching layouts, animations, and transformations.
Fine-tune your adaptive design
Make a component out of a single element or a collection of elements on the page or in the Layers panel. All of the props will be inherited by component copies that are added to the page.
Additionally, you can include pre-made blocks like maps, videos, pop-ups, and much more.
Customizing design with breakpoints
You can make sure your site is mobile-friendly by designing different 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.
You can select multiple elements to set their styles, drag'n'drop them to another place, remove, etc.
You can change the appearance of text in many ways. For example, you can italicize it or make it bold. You can also make it into a link or turn it into a span element.
Use the double click to move up and down the hierarchy of elements in your document. If you need to go inside the hierarchy, hold down the Ctrl key on Windows and the Cmd key on MacOs.
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.
Activate the "hover" prop and set up the desired props to change how an element appears, for example, in a hover state.
Google Fonts Connection
Make your website design more expressive by connecting fonts from a library with more than 990 font families.
Browse Unsplash's collection of free images and choose directly from the Quarkly interface.
This provides categorized functional and stylistic attributes.
You can set the element display properties in this section.
To change the style of your text, use special properties in this section.
To configure margins and paddings, open these settings.
Props for setting up element backgrounds can be found in this section.
Find the options for borders and border radius configuration in this section.
This category allows you to adjust element position and z-index settings.
This property makes an element transition smoothly from one state to another.
You can use this property to transform the element, for example, rotate or zoom.
Create custom React components using the code editor
Custom React components can be made in Quarkly's code editor and then inserted onto the page.
The pages are written in JSX code typical for React.js.
Hot import from NPM
Import modules from NPM quickly, if you need to.
Optimize your site to promote it on search engines.
If you want to host your project on your server, you can export it into an archive with create-react-app.
Fine-tune elements in the code editor.
Export to Gatsby Project
You can easily export your work to Gatsby, a popular static site generator.
Pushing commits to your GitHub repository
You can establish a GitHub repository for your project and submit updates there if necessary.
Publication on Netlify
When your site is ready, publish it on Netlify. It'll have a technical domain, for example: 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.
Our debug console will help you track errors in the component code and 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.
Check out the Quarkly collaboration tool: send an invite to your teammates to work on a project with them.
Any element can serve as a tag. Simply select the "as" property value you require.
In the code editor, you can give items the desired attributes.
This is a separate property of the “Image” element.
Set up exclusive icons for various devices and individual tile background color for Windows 10.
Open graph and meta tags
Make sure your website stands out in search engine results and social media with these display settings.
Get the best of both worlds with human-readable URLs that improve your site's SEO and usability.
Robots.txt and sitemap.xml
These files are automatically produced. But if necessary, you can alter them.
We provide Quarkly for free as long as we can, and then the lowest price among competitors.Create project