All-in-one website builder on React — Quarkly. Completely free — you should try it now. Create your website from scratch or ready-to-use templatesCreate Project
A website is made up of fundamental elements similar to HTML tags. For example, Text, Image, and Вох.
Create a consistent and professional-looking design with the help of themes.
Use animation, effects, and transformations to make your web page come to life.
Fine-tune your adaptive design
On the page or on the Layer panel, choose an element (or a group of elements) and convert them into a component. Add component copies to the page. All the props will be inherited.
Place ready-made blocks on the page, for example, maps, videos, pop-ups, and more
Customizing design with breakpoints
By utilizing various design approaches for elements at breakpoints, your website is completely responsive to mobile devices.
Adding and editing breakpoints
You can add custom breakpoints or edit existing ones in the project theme.
Element placement options include dragging and dropping, nesting, and arranging them however you like on the page.
Use the multi-element selection tool to set styles, move, remove, or take other actions on multiple elements.
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.
With the double click, you can go up and down the hierarchy of elements. If you need to get inside the hierarchy, hold down the Ctrl key on Windows and the Cmd key on MacOs.
Support of Flexbox and Grid
The most cutting-edge frontend coding techniques are supported by Quarkly.
Configuring styles of pseudo-classes hover/active/focus, etc.
Transform the appearance of an element, including its hover behavior, by turning on "hover" and adjusting the desired properties.
Google Fonts Connection
Use fonts from a library that has over 990 font families in it to make your website look more colorful.
One of the most well-liked free photo sites is Unsplash. From the Quarkly interface, you can search for and choose images.
Here you will find categorized style and functional properties.
In this section, you can configure element display properties.
Here you'll find text style properties that can be applied to your text.
Here you can configure margins and paddings, which control the space around elements.
This section contains props that help you create element backgrounds.
Borders and border radius can be set up here.
This category helps you configure element position and z-index settings.
This property makes an element move smoothly from one state to another.
This property allows you to manipulate the element, such as by rotating or zooming.
Create custom React components using the code editor
You can make your own React components in the Quarkly code editor and add them to the page.
The pages are written in JSX code typical for React.js.
Hot import from NPM
Import modules from NPM to your component quickly and easily.
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
One of the best open-source SSGs, Gatsby, may be used to export your projects in no time.
Pushing commits to your GitHub repository
You can create a GitHub repository for your project and commit changes.
Publication on Netlify
Publish your site on Netlify once it's ready. A technical domain will be created automatically for it, for example: https://inspiring-beaver-d128ed.netlify.app.
Modern built-in code editor
The editor displays every entity on the page.
To find faults in the component code and pages, use our debug console.
Tooltips in the code
Not sure about the spelling of a property? Start typing and the editor will provide assistance.
Synched pages and code editor
Pages and code are updated in real-time, displaying all changes made in both areas.
Take advantage of the Quarkly collaboration tool: work on a project together with your teammates, just send them an invite.
Make every component work as a tag by selecting the desired "as" property value.
You can specify desired attributes for elements in the code editor.
A unique attribute of the "Image" element.
You can install distinctive icons for every device and a custom tile backdrop color for Windows with this functionality.
Open graph and meta tags
These settings are meant for the correct display of your website in search engine results and social media
To improve your site's SEO, make sure the URLs are readable by humans.
Robots.txt and sitemap.xml
These files are there for you to use. But you can change them and add to them as you see fit.
We provide Quarkly for free as long as we can, and then the lowest price among competitors.Create project