Choose from one of many pre-made blocks. Unlimited customisation possibilities, no-code tools of a classic editor. Get all the power of graphic design tools and website buildersCreate Project
A website is made up of fundamental elements similar to HTML tags. For example, Text, Image, and Вох.
It's simple to give your website a unified look with themes.
By including unique layouts, animations, effects, and transformations, you can increase the usefulness of your websites.
Fine-tune your adaptive design
Any combination of elements on the page or in a layer can be used to create reusable components. The component inherits all of its original properties when you add it to a page.
You can also add ready-made blocks: maps, videos, pop-ups and much more.
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
Customizing or editing breakpoints is possible in the project theme.
You decide where to place the elements. Move them wherever you want, or nest them in other elements.
You can select multiple elements and apply formatting to them, drag them to another spot in the document, or remove them from their current location.
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-click the elements to move up and down in their hierarchical order. Hold down the Ctrl key on Windows or the Cmd key on Mac OS to descend into the hierarchy.
Support of Flexbox and Grid
Quarkly supports the most modern methods of frontend coding.
Configuring styles of pseudo-classes hover/active/focus, etc.
If you want to change the element look, for instance, how it appears on hover, enable "hover" and configure the desired props.
Google Fonts Connection
Give your website design a unique look by choosing from the library of 990+ font families.
From the Quarkly interface, browse the Unsplash image library and select the images you require.
Here you'll find categorized collections of style and functional properties.
Element display properties can be found here.
To change the style of your text, use special properties in this section.
Open these settings to configure margins and paddings.
The section contains props that enable you to set element backgrounds.
With these options, you can set up borders and border radius.
Here, element position and z-index can be adjusted through these settings.
This property makes an element transit smoothly from one state to another.
This property allows you to transform the element, for example, rotate or zoom.
Create custom React components using the code editor
With the Quarkly code editor, you can create custom React components and then use them on a webpage.
The pages are written in JSX code typical for React.js.
Hot import from NPM
If necessary, quickly import modules into your component through NPM.
Optimize your site to promote it on search engines.
You can export a create-react-app project into an archive file that you can host on your own server.
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
Making a GitHub repository for your project and committing changes can be done with ease.
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
In the Quarkly editor, you can keep an eye on each thing on the page.
In the debug console, component code or page errors might be found.
Tooltips in the code
If you don't know exactly how to spell a property, start typing and the editor will help you.
Synched pages and code editor
Every change you make to a page is reflected in the code, and vice versa.
Benefit from the Quarkly collaboration tool: work on a project with your team by just sending them an invite.
You can use every component as a tag. Just choose the “as” property value that you need.
You can give any element the required characteristics in the code editor.
A separate property belonging to the “Image” element.
Set up exclusive icons for various devices and individual tile background color for Windows 10.
Open graph and meta tags
Set these options appropriately to ensure that your website appears as intended in social media and search engine results.
Make sure you use human-readable URLs to improve your site's SEO.
Robots.txt and sitemap.xml
These files are created automatically for you to edit further.
We provide Quarkly for free as long as we can, and then the lowest price among competitors.Create project