Create your website from scratch or ready-to-use templates. Unlimited customisation possibilities, no-code tools of a classic editor. Choose from one of many pre-made blocks
Create ProjectPrimitives
Primitive content elements function similarly to HTML tags. For example, Text, Image, and Вох.
Themes
Themes can help you design your website consistently.
Extended Styling
Add a touch of flair to your site with unique layouts, eye-popping animations, and breathtaking transformations.
Adaptive design
Fine-tune your adaptive design
Components
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.
Ready-made Content
Add maps, videos, pop-ups, and more to your site with ready-made blocks.
Customizing design with breakpoints
Your website will automatically adjust to different screen sizes, with different design solutions for elements at breakpoints.
Adding and editing breakpoints
Customize or edit breakpoints in the project theme as desired.
Drag'n'Drop
You decide where to place the elements. Move them wherever you want, or nest them in other elements.
Multiselect
You can pick multiple elements, modify their styles, move them to a different location, delete them, and more.
Text editor
You can bold or italicize part of the text; turn it into a link or a span; or apply any other style to it.
Deep select
The double click allows you to move up and down the hierarchy of elements. Hold down the Ctrl key on Windows or the Cmd key on a Mac to enter the hierarchy.
Support of Flexbox and Grid
We're thrilled to provide you with the top frontend coding techniques available.
Configuring styles of pseudo-classes hover/active/focus, etc.
Activate the "hover" prop and set up the desired props to change how an element appears, for example, in a hover state.
Google Fonts Connection
Give your website a more vibrant look by using fonts from a library that contains over 990 font families.
Unsplash images
Use Unsplash, a top-rated free image stock, to search for images and select them directly from Quarkly.
Props panel
This provides categorized functional and stylistic attributes.
Layout
Explore element display properties in this location.
Typography
Use the special properties in this section to alter the text's style.
Indents
You can modify the padding and margins in these settings.
Background
This section contains props that help set element backgrounds.
Borders
Here you can adjust borders and border radius.
Position
This category allows you to adjust element position and z-index settings.
Transition
The smooth movement from one state to another for an element is enabled by this property.
Transform
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.
React.js
The pages are written in JSX code typical for React.js.
Hot import from NPM
Import modules to your component from NPM with ease.
SEO
Optimize your site to promote it on search engines.
Export CRA
If your goal is to host a project on your server, here's the one thing you have to do: export it into an archive with a create-react-app project!
Code Editor
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
Effortlessly, you can make a GitHub repository for your project and commit changes.
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
The Quarkly editor contains all of the page's entities.
Debugger
You can keep track of component code and page errors with the debug console.
Tooltips in the code
Don't let spelling uncertainties hold you back — start typing and the editor will guide you.
Synched pages and code editor
Pages and code are updated in real-time, displaying all changes made in both areas.
Collaboration
Profit from the Quarkly collaboration tool by inviting your colleagues to work on a project with you.
Semantic tags
All components can be used as a tag. Just select the tag's “as” property value.
Schema.org
You can give any element the required characteristics in the code editor.
Image ALT
The "Image" element has a distinct property for this.
Favicons
Get creative with device icons and tile background color on Windows 10 with this exclusive setup feature.
Open graph and meta tags
Use these settings to ensure that your website appears as intended on social media and in search results.
User-friendly URL
Make sure you use human-readable URLs to improve your site's SEO.
Robots.txt and sitemap.xml
These files are automatically produced. But you are free to change them as you choose.
We provide Quarkly for free as long as we can, and then the lowest price among competitors.
Create project