Completely free — you should try it now. Choose from one of many pre-made blocks. Unlimited customisation possibilities, no-code tools of a classic editorCreate Project
Primitive content elements function similarly to HTML tags. For example, Text, Image, and Вох.
Create a professional-looking design easily by using themes.
Make your websites more useful by adding original layouts, animations, effects, and transformations.
Fine-tune your adaptive design
On the page, you can select an element (or a collection of elements) and turn them into a component. All the props will be passed on to copies that are added to the page.
To improve your website, use the pre-made blocks, which include videos, pop-ups, maps, and more.
Customizing design with breakpoints
Your website is completely responsive to mobile devices by using different design solutions for elements at breakpoints.
Adding and editing breakpoints
You can add custom breakpoints or edit existing ones in the project theme.
Have complete control over arranging elements on the page — drop them, nest them, or move them to your desired location.
Take control of multiple elements by selecting them and setting styles, moving, deleting, or doing more.
Style text as desired, make it bold or italic, turn it into a link or convert it to span, the choice is yours.
Navigate the hierarchy of elements with a double click. Hold down Ctrl on Windows or Cmd on MacOS to dive deeper.
Support of Flexbox and Grid
The most cutting-edge methods of front-end coding are supported by Quarkly.
Configuring styles of pseudo-classes hover/active/focus, etc.
To alter how an element appears, for instance in a hover state, activate the "hover" prop and arrange the desired props.
Google Fonts Connection
Make use of fonts from a collection that includes over 990 font families to give your website a more vibrant appearance.
Utilize Unsplash, one of the most widely used free image banks, to choose images directly from the Quarkly interface.
Style and utility characteristics are categorized here.
If you want to use element display properties, look at this section.
Use the special properties in this section to alter the text's style.
To configure margins and paddings, open these settings.
In this section, you can find props for element backgrounds.
Here you can set up borders and border radius.
This category lets you use position and z-index settings.
This property makes an element move 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
Create your own React components in the Quarkly code editor and seamlessly integrate them into the page.
The pages are written in JSX code typical for React.js.
Hot import from NPM
Modules from NPM can be imported into your component.
Optimize your site to promote it on search engines.
You can export your project as an archive using a create-react-app project if you want to finish it or host it on your server.
Fine-tune elements in the code editor.
Export to Gatsby Project
One of the most well-liked static site generators, Gatsby, is one to which you can export your projects.
Pushing commits to your GitHub repository
If you'd like to keep track of your changes, you can create a GitHub repository and commit them.
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 lets you see all the entities that are present on the page.
The debug console shows errors in the component code or pages.
Tooltips in the code
If you need help when spelling a property, start typing and the editor will auto-complete what you've written.
Synched pages and code editor
Changes made to a page are reflected in the code and vice versa.
Send your coworkers an invitation to collaborate with you on a project using the Quarkly collaboration tool.
You can use every component as a tag. Just choose the “as” property value that you need.
In the code editor, you can add attributes to elements as necessary.
This particular property is a part of the "Image" element.
Install distinctive device icons and a customized Windows tile backdrop color.
Open graph and meta tags
Use these settings to ensure that your website appears as intended on social media and in search results.
Clean URLs will help you improve your site's SEO.
Robots.txt and sitemap.xml
Automatically generated files open for your editing and personalization.
We provide Quarkly for free as long as we can, and then the lowest price among competitors.Create project