All-in-one website builder on React — Quarkly. Get all the power of graphic design tools and website builders. Complete design control, supports Grid and FlexboxCreate Project
Text, Image, Box — the most basic components similar to HTML tags.
You can use themes to create a consistent design for your site.
Use animation, effects, and transformations to make your web page come to life.
Fine-tune your adaptive design
Select an element or a group of elements on the Layer panel and turn it into a component. Add copies of the components to the page and all the props will be inherited.
With pre-made blocks, you can add maps, videos, pop-ups, and more to your website.
Customizing design with breakpoints
Your site works perfectly on mobile devices by using different design solutions for elements at breakpoints.
Adding and editing breakpoints
You have an opportunity to use breakpoints of the project theme or download your own ones.
You choose where to put the elements. You can move them around or nest them in other elements.
You can apply styles to multiple elements at once and move them around, as well as remove them.
A portion of the text can be changed by applying any style, making it bold or italic, linking to it or making it a span.
Double-clicking the hierarchy of elements will take you up and down the element structure. If you want to get inside the structure, hold down the Ctrl key on Windows or the Cmd key on MacOs.
Support of Flexbox and Grid
We follow up-to-date frontend coding approaches at Quarkly.
Configuring styles of pseudo-classes hover/active/focus, etc.
To change the appearance of an element, for example, its hover behavior, enable the "hover" prop and apply any desired additional props.
Google Fonts Connection
Give your website design a unique look by choosing from the library of 990+ font families.
Utilize Unsplash, one of the most widely used free image banks, to choose images directly from the Quarkly interface.
Style and utility characteristics are categorized here.
You can set the element display properties in this section.
You can change text styles by using special properties in this section.
You can configure margins and paddings in these settings.
Props for setting up element backgrounds can be found in this section.
Here you have access to the tools for adjusting borders and border radius.
You can change the element position and z-index settings in this category.
An element can transition from one state to another without interruption thanks to this property.
You can rotate or zoom the element using this property, for example.
Create custom React components using the code editor
The Quarkly code editor allows you to create unique React components and then place them on the page.
The pages are written in JSX code typical for React.js.
Hot import from NPM
It has never been simpler to import modules from NPM into your component.
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 projects to Gatsby, a popular static site generator.
Pushing commits to your GitHub repository
You can build a GitHub repository for your projects if necessary and commit updates there.
Publication on Netlify
Publish your ready site on Netlify to receive a technical domain name, such as https://inspiring-beaver-d128ed.netlify.app.
Modern built-in code editor
All of the entities that are present on the page are displayed by the editor.
To find faults in the component code and pages, use our debug console.
Tooltips in the code
The editor is here to help with property spelling — just start typing.
Synched pages and code editor
The pages and code maintain a dynamic relationship, showing any modifications made in both.
Share projects and work with your team members via Quarkly's collaboration tool. It's easy to use.
All components can act as a tag. Just select the necessary “as” property value.
You can edit the necessary attributes of elements in the code editor.
A unique attribute of the "Image" element.
Make your devices stand out with unique icons and personalized tile background color on Windows 10.
Open graph and meta tags
Use these settings for the correct display of your site on social networks and in search engines.
It's a good idea to use human-readable URLs to improve your site's search engine optimization.
Robots.txt and sitemap.xml
You can further change these automatically generated files.
We provide Quarkly for free as long as we can, and then the lowest price among competitors.Create project