Get all the power of graphic design tools and website builders. All-in-one website builder on React — Quarkly. Create your website from scratch or ready-to-use templatesCreate Project
Fundamental building blocks resembling HTML tags, such as Text, Image, and Box.
Utilize themes to build a consistent and attractive design for your website.
By including unique layouts, animations, effects, and transformations, you can increase the usefulness of your websites.
Fine-tune your adaptive design
Transform an element or group of elements on the page or Layer panel into a component. Add copies to the page and they will inherit all properties.
Enhance your page with ready-made blocks including maps, videos, pop-ups, and more.
Customizing design with breakpoints
Rest assured your site is completely mobile-friendly by using different design solutions for elements at breakpoints.
Adding and editing breakpoints
Use your own breakpoints or choose one of the ones that are already there.
You decide where to place the elements. Move them wherever you want, or nest them in other elements.
You can select multiple elements and apply formatting to them, drag them to another spot in the document, or remove them from their current location.
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.
With the double click, you can go up and down the hierarchy of elements. If you need to get inside the hierarchy, hold down the Ctrl key on Windows and the Cmd key on MacOs.
Support of Flexbox and Grid
Here at Quarkly, we are the advocates of cutting-edge approaches to frontend coding.
Configuring styles of pseudo-classes hover/active/focus, etc.
Transform the appearance of an element, including its hover behavior, by turning on "hover" and adjusting the desired properties.
Google Fonts Connection
Make use of fonts from a collection that includes over 990 font families to give your website a more vibrant appearance.
Browse the Unsplash image collection and choose those you need directly from the Quarkly interface.
Enjoy the convenience of having categorized style and functional properties at your fingertips.
Check out this section to use element display properties.
To find the text style properties, go to this section.
Here you will find the settings for margins and paddings.
This section contains props that help you create element backgrounds.
Find the options for borders and border radius configuration in this section.
The element position and z-index settings can be altered here.
By using this property, you can make the transition between states of an element smooth.
With the help of this property, you can rotate or zoom the element.
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
Modules from NPM can be imported into your component.
Optimize your site to promote it on search engines.
One step to complete your project or host it on your own server: export it into an archive with a create-react-app project.
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
You can create a GitHub repository for your project and commit changes.
Publication on Netlify
When your site is complete, publish it on Netlify for an automatically generated technical domain, like https://inspiring-beaver-d128ed.netlify.app.
Modern built-in code editor
In the Quarkly editor, you can monitor all the entities that are present on the page.
Mistakes in the component code can be identified in the debug console.
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 pages both reflect any modifications made to the pages.
Make use of the Quarkly collaboration tool by inviting your teammates to work on a project with you.
Any element can serve as a tag. Simply select the "as" property value you require.
In the code editor, you can add attributes to elements as necessary.
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
Optimize the display of your site in search engine results and on social media with these settings.
Make sure you use human-readable URLs to improve your site's SEO.
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