Publish your website online or export it to Github. Visual interface, adaptive design settings, code editor, React components, all possibilities of CSS. Choose from one of many pre-made blocksCreate Project
Basic components which are similar to HTML tags like Text, Image, Box, and others.
You can make your site's design consistent by using themes.
Add some flash to your web pages with stylish animations, effects, and transformations.
Fine-tune your adaptive design
You can create reusable components from any selection of elements on the page or in a layer. When you add the component to a page, it inherit all of its original properties.
Use the ready-made blocks such as maps, videos, pop-ups, and more to enhance your site.
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
You can use your own custom breakpoints, or select one of the existing ones.
Move elements around, place them however you want on the page, or nest them in other elements.
You can apply styles to multiple elements at once and move them around, as well as remove them.
You can edit part of the text making it bold or italic, turning it into a link or converting to span, as well as appyling any style to it.
If you need to go up and down the hierarchy of elements, double-click them. If you want to dive into the hierarchy, hold down the Ctrl key on Windows and the Cmd key on MacOs.
Support of Flexbox and Grid
Quarkly supports the most advanced approaches to frontend coding.
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
If you want your site design to look more professional, consider using a library of more than 990 font families.
Unsplash is a popular free image stock. You can search and select images directly from the Quarkly interface.
Enjoy categorized styles and functional properties in a friendly interface.
Under this section, you can find element display properties.
Check out this section to take advantage of text style properties.
Here you can configure margins and paddings.
This section offers props for setting up element backgrounds.
This section allows you to adjust borders and border radius.
With this category, you can fine-tune element position and z-index settings.
This property makes an element transit smoothly from one state to another.
You can use this property to transform the element, for example, rotate or zoom.
Creating custom React components in the code editor
With the Quarkly code editor, you can 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
Importing modules to your component from NPM has never been easier.
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
You can easily export your projects to Gatsby, which is 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
When your site is ready, publish it on Netlify. It'll have a technical domain, for example: https://inspiring-beaver-d128ed.netlify.app.
Modern built-in code editor
The editor shows all the entities that are present on the page.
Errors in the component code or pages can be tracked by viewing the debug console.
Tooltips in the code
If you are not sure how to spell a property, start typing and the editor will help you.
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.
Work together as a team
Take advantage of the Quarkly collaboration tool: work on a project together with your teammates, just send them an invite.
All components can be used as a tag. Just select the tag's “as” property value.
In the code editor, you can assign desired attributes to any element.
This is an individual property that belongs to the “Image” element.
This feature helps you install unique icons for all devices and individual tile background color for Windows 10.
Open graph and meta tags
These settings will help your site display correctly on social networks and in search engines.
Make sure you use human-readable URLs to improve your site's SEO.
Robots.txt and sitemap.xml
These files are automatically created. But you can edit them if necessary.
We provide Quarkly for free as long as we can, and then the lowest price among competitors.Create project