Unlimited customisation possibilities, no-code tools of a classic editor. Visual interface, adaptive design settings, code editor, React components, all possibilities of CSS. All-in-one website builder on React — QuarklyCreate Project
These are the most basic components similar to HTML tags: Text, Image, Вох, and others.
You can use themes to create a consistent design for your site.
Make your website unforgettable with creative layouts, dynamic animations, and exciting transformations.
Fine-tune your adaptive design
Components are reusable design elements. To create a component, select an element or group of elements on the page or in the Layers panel and group them into component. Add copies of the component to the page, and they will inherit all their properties from the original.
Add premade blocks, including videos, pop-ups, maps, and more.
Customizing design with breakpoints
Make sure your site is 100% adaptive by using different design 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 pick multiple elements, modify their styles, move them to a different location, delete them, and more.
You can make part of the text bold or italic, turn it into a link or convert to span, and apply any style to it.
Click twice to go up and down the hierarchy of elements. If you need to get inside the hierarchy, hold down Ctrl on Windows or Cmd 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 element appearance, for example, the way it behaves on hover, enable "hover" and apply the desired props.
Google Fonts Connection
Use fonts from a library that has over 990 font families in it to make your website look more colorful.
One of the most well-liked free photo sites is Unsplash. From the Quarkly interface, you can search for and choose images.
Style and utility characteristics are categorized here.
This section allows you to configure the display properties of elements.
Use the properties in this section to change the text's appearance.
These settings allow you to change margins and paddings.
Props for setting up element backgrounds can be found in this section.
This section allows you to configure borders and border radius.
This category helps you configure element position and z-index settings.
Elements can easily transition from one state to another thanks to this property.
With the help of this property, you can rotate or zoom an element.
Create custom React components using the code editor
In Quarkly, you can create custom React components in the code editor and then place them on the page.
The pages are written in JSX code typical for React.js.
Hot import from NPM
Quickly import modules to your component from NPM when needed.
Optimize your site to promote it on search engines.
To wrap up your project or host it on your server, simply export it into an archive using a create-react-app project.
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
Want to create a GitHub repository for your project and commit changes there? Piece of cake!
Publication on Netlify
Publish your site on Netlify once it's ready. A technical domain will be created automatically for it, for example: 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.
The debug console shows errors in the component code or pages.
Tooltips in the code
As you type, the editor will suggest possible matches to the property you're looking for.
Synched pages and code editor
Every change you make to a page is reflected in the code, and vice versa.
Take advantage of the Quarkly collaboration tool: work on a project together with your teammates, just send them an invite.
Any element can serve as a tag. Simply select the "as" property value you require.
You can edit the necessary attributes of elements in the code editor.
A separate property belonging to the “Image” element.
You can install distinctive icons for every device and a custom tile backdrop color for Windows with this functionality.
Open graph and meta tags
Make sure your website stands out in search engine results and social media with these display settings.
Make sure your site's URLs are human-readable to improve 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