Create your website from scratch or ready-to-use templates. All-in-one website builder on React — Quarkly. Unlimited customisation possibilities, no-code tools of a classic editorCreate Project
A website is made up of fundamental elements similar to HTML tags. For example, Text, Image, and Вох.
Using themes will help your website's design remain consistent.
Add a touch of flair to your site with unique layouts, eye-popping animations, and breathtaking transformations.
Fine-tune your adaptive design
Select a single element or multiple elements on the page or Layer panel and convert them into a component. Place component copies on the page and enjoy the inheritance of all properties.
Add ready-made blocks: maps, videos, pop-ups, and many more
Customizing design with breakpoints
Your website is completely responsive to mobile devices by using different design solutions for elements at breakpoints.
Adding and editing breakpoints
In the project theme, you may want to add custom breakpoints or edit existing ones.
You can move the elements wherever you want. Nest them in other elements, or leave them as they are.
You can select multiple elements and move them to another location, remove them, and more.
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.
Double-click the elements to move up and down in their hierarchical order. Hold down the Ctrl key on Windows or the Cmd key on Mac OS to descend into the hierarchy.
Support of Flexbox and Grid
At Quarkly, we keep up with the up-to-date frontend coding approaches.
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
Use fonts from a library that has over 990 font families in it to make your website look more colorful.
Unsplash is a popular free image stock. You can search and select images directly from the Quarkly interface.
Here you will find categorized style and functional properties.
Get access to element display properties in this section.
Use the special properties in this section to alter the text's style.
Here you can configure margins and paddings, which control the space around elements.
Here you'll find some props to help you set up element backgrounds.
This section allows you to adjust borders and border radius.
This category lets you use position and z-index settings.
An element can transition from one state to another without interruption thanks to this property.
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
Importing modules from NPM to your component is a breeze.
Optimize your site to promote it on search engines.
There is just one thing to do if you want to finish or host your project on your server: export it into an archive with a create-react-app project!
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'd like to keep track of your changes, you can create a GitHub repository and commit them.
Publication on Netlify
Publish your site on Netlify once you're ready for it to go live. A technical domain will be created automatically for it, like: https://inspiring-beaver-d128ed.netlify.app
Modern built-in code editor
You can keep an eye on every entity on the page in the Quarkly editor.
When there are errors in the component code or pages, they can be seen in the debug console.
Tooltips in the code
If you need help when spelling a property, start typing and the editor will auto-complete what you've written.
Synched pages and code editor
When you make changes to the page, you can see those same edits reflected in the code.
Make teamwork a breeze with the Quarkly collaboration tool, just send an invite to your coworkers.
Every component can act as a tag. Just choose the “as” property value that you need.
You can specify desired attributes for elements in the code editor.
This particular property is a part of the "Image" element.
You can use unique icons for different devices and change the background color of Windows 10 tiles.
Open graph and meta tags
These settings will help your site display correctly on social networks and in search engines.
Improve your site's SEO and user experience with user-friendly page URLs.
Robots.txt and sitemap.xml
Ready-made files available for customization and future editing.
We provide Quarkly for free as long as we can, and then the lowest price among competitors.Create project