Unlimited customisation possibilities, no-code tools of a classic editor. Complete design control, supports Grid and Flexbox. Completely free — you should try it nowCreate Project
These are the most basic components similar to HTML tags: Text, Image, Вох, and others.
Using themes will help your website's design remain consistent.
Add a touch of flair to your site with unique layouts, eye-popping animations, and breathtaking transformations.
Fine-tune your adaptive design
You can choose an element (or a group of elements) on the page and convert them into a component. Add copies to the page and they will inherit all the props.
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
Customizing or editing breakpoints is possible in the project theme.
Drag and drop elements to arrange them on the page, or nest them in other elements.
You can drag and drop multiple elements to a different location, remove them, or change their styles while they are selected.
Bold, italic, link, span, and other styles, all options to make your text stand out.
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
We follow up-to-date frontend coding approaches at Quarkly.
Configuring styles of pseudo-classes hover/active/focus, etc.
By activating the "hover" prop and positioning the desired props, you can change how an element appears, for example in a hover state.
Google Fonts Connection
If you want your site design to look more professional, consider using a library of more than 990 font families.
Select stunning images from the Unsplash library directly through the Quarkly interface.
Here you can find all the styles and functional properties.
This is where you can locate element display properties.
Here you'll find text style properties that can be applied to your text.
You can modify the padding and margins in these settings.
Here, you will have access to props for element background setup.
Borders and border radius can be set up here.
This category allows you to position elements and set their z-index values.
With this property, you can make an element move smoothly from one state to another.
You can transform the element using this property, for instance, 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 to your component from NPM with ease.
Optimize your site to promote it on search engines.
One step to complete your project or host it on your own server: export it into an archive with a create-react-app project.
Fine-tune elements in the code editor.
Export to Gatsby Project
Export your projects to Gatsby — one of the most famous static-site generation web frameworks
Pushing commits to your GitHub repository
If needed, you can create a GitHub repository for your project and commit changes.
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 displays every entity on the page.
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
Every change you make to a page is reflected in the code, and vice versa.
Make use of the Quarkly collaboration tool by inviting your teammates to work on a project with you.
Every component can act as a tag. Just choose the “as” property value that you need.
In the code editor, you can assign necessary attributes to elements.
The "Image" element has a distinct property for this.
Set up unique Windows tile background colors and exclusive icons for multiple devices.
Open graph and meta tags
Set these options appropriately to ensure that your website appears as intended in social media and search engine results.
You may increase the SEO of your site by using clean URLs.
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