Publish your website online or export it to Github. Use pre-made React components or build your own. Get all the power of graphic design tools and website buildersCreate Project
These are the most basic components similar to HTML tags: Text, Image, Вох, and others.
Themes make it easy to create a consistent look for your website.
Add a touch of flair to your site with unique layouts, eye-popping animations, and breathtaking transformations.
Fine-tune your adaptive design
On the page or on the Layer panel, choose an element (or a group of elements) and convert them into a component. Add component copies to the page. All the props will be inherited.
To improve your website, use the pre-made blocks, which include videos, pop-ups, maps, and more.
Customizing design with breakpoints
Guarantee a 100% adaptive website by using design solutions that cater to elements at breakpoints.
Adding and editing breakpoints
Add your own breakpoints or modify existing ones in the project theme.
You can align or stack elements however you want and drop them on any area of the page, or nest them in other elements.
You can select multiple elements and modify their styles or drag'n'drop them to change their location.
Bold, italic, link, span, and other styles, all options to make your text stand out.
Use the double click to move up and down the hierarchy of elements in your document. If you need to go inside the hierarchy, hold down the Ctrl key on Windows and the Cmd key on MacOs.
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.
To change the element appearance, for example, the way it behaves on hover, enable "hover" and apply the desired props.
Google Fonts Connection
To make your site design look more professional go and use a library of more than 990 font families.
Use Unsplash, a top-rated free image stock, to search for images and select them directly from Quarkly.
Take advantage of the categorized style and props.
Get access to element display properties in this section.
Browse text style properties in this section
Margin and padding configuration is available here.
In this section, you can find props for element backgrounds.
Here you can adjust borders and border radius.
Here, element position and z-index can be adjusted through these 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
In Quarkly, the code editor provides the ability to build unique React components and add them to the page.
The pages are written in JSX code typical for React.js.
Hot import from NPM
Import modules from NPM to your component quickly and easily.
Optimize your site to promote it on search engines.
If you need to complete or host your project on your own server, it's easy: just export it into an archive with a create-react-app project.
Fine-tune elements in the code editor.
Export to Gatsby Project
With just a few clicks, export your projects to Gatsby, a well-known static site generator.
Pushing commits to your GitHub repository
Want to add modifications to a GitHub repository you've created for your project? Well, you can. With Quarkly.
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
All of the page's entities can be found in the Quarkly editor.
Monitor component code and page errors using the debug console.
Tooltips in the code
If you're unsure how to spell a property, start typing and the editor will provide suggestions.
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.
Take advantage of the Quarkly collaboration tool: work on a project together with your teammates, just send them an invite.
Each component can act as a tag. Just select the desired value of the “as” property.
You can give elements the desired attributes through the code editor.
A unique attribute that belongs to the "Image" element.
This feature allows you to install icons for all devices and change the background color of individual tiles in Windows 10.
Open graph and meta tags
Optimize the display of your site in search engine results and on social media with these settings.
Create user-friendly URLs to boost the usability of the resource and the ranking of your site in the search engines.
Robots.txt and sitemap.xml
These files are created automatically. But you can edit them as you think they fit in the future.
We provide Quarkly for free as long as we can, and then the lowest price among competitors.Create project