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, Вох, and others.
It's simple to give your website a unified look with themes.
Bring life into your web page with stylish animations, effects, and transformations.
Fine-tune your adaptive design
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.
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.
Move elements around, place them however you want on the page, or nest them in other elements.
You can drag and drop multiple elements to a different location, remove them, or change their styles while they are selected.
If needed, you can change part of the text into bold or italic, link or convert it to span, or edit its style.
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.
Browse the Unsplash image collection and choose those you need directly from the Quarkly interface.
Here you will find categorized style and functional properties.
You can find the element display properties under this section.
Here you'll find text style properties that can be applied to your text.
Margin and padding configuration is available here.
Props in this section help create the backgrounds for the elements.
Here you can configure border and border radius.
You can modify the settings for element position and z-index in this category.
This property makes an element transition smoothly from one state to another.
This property gives you the power to transform your element in a variety of ways, like rotating or zooming.
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.
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.
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
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.
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.
Share projects and work with your team members via Quarkly's collaboration tool. It's easy to use.
Make every component work as a tag by selecting the desired "as" property value.
You can give elements the desired attributes through 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
Configure these settings to display your website correctly in search engine results and social media.
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.
We provide Quarkly for free as long as we can, and then the lowest price among competitors.Create project