Completely free — you should try it now. Get all the power of graphic design tools and website builders. All-in-one website builder on React — QuarklyCreate Project
Website is composed of basic components similar to HTML tags such as Text, Image, and Вох.
Create a professional-looking design easily by using themes.
Bring life into your web page with stylish animations, effects, and transformations.
Fine-tune your adaptive design
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.
Place ready-made blocks on the page, for example, maps, videos, pop-ups, and more
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
You can use your own custom breakpoints, or select one of the existing ones.
You can align or stack elements however you want and drop them on any area of the page, or nest them in other elements.
You can select multiple elements to set their styles, drag'n'drop them to another place, remove, etc.
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.
Double-clicking the hierarchy of elements will take you up and down the element structure. If you want to get inside the structure, hold down the Ctrl key on Windows or 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.
To change the appearance of an element, for example, its hover behavior, enable the "hover" prop and apply any desired additional props.
Google Fonts Connection
If you want your site design to look more professional, consider using a library of more than 990 font families.
Use Unsplash, one of the most popular free image stocks that provide images you can use directly without downloading.
Enjoy categorized styles and functional properties in a friendly interface.
Check out this section to use element display properties.
Check out this section to take advantage of text style properties.
These settings allow you to change margins and paddings.
This section consists of props for element backgrounds.
This section allows you to configure borders and border radius.
This category lets you fine-tune element position and z-index settings.
This property makes an element change smoothly from one state to another.
With this property, you can transform the element, for instance, rotate or zoom.
Creating custom React components in the code editor
You can build and add custom React components to your Quarkly pages using the code editor.
The pages are written in JSX code typical for React.js
Hot import from NPM
Import modules to your component with ease, if needed.
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
You can easily export your projects to Gatsby, a popular static site generator.
Pushing commits to your GitHub repository
You can store your project in a GitHub repository and make changes to it.
Publication on Netlify
Publish your site on Netlify whenever it's ready. A custom domain will be automatically generated for you, for example: https://inspiring-beaver-d128ed.netlify.com
Modern built-in code editor
The editor displays all the entities of the page.
Errors in the component code or pages can be seen in the debug console.
Tips in the code
If you're unsure how to spell a property, start typing and the editor will provide suggestions.
Synched pages and code editor
The code and the pages are merged, so your changes to the code are visible in the page and vice versa.
Take advantage of the Quarkly collaboration tool: work on a project together with your teammates, just send them an invite.
You can make a component act as a tag by setting the “as” property to the desired value.
You can set attributes to elements in the code editor.
A separate property belonging to the “Image” element.
You can install different icons for different devices, and you can also set a unique background color for Windows 10.
Open graph and meta tags
Here are some settings that will help your site appear correctly on social networks and in search engines.
This feature allows you to set user-friendly page URLs.
Robots.txt and sitemap.xml
These files are automatically created. But you can edit them if necessary.
We provide Quarkly for free as long as we can, and then the lowest price among competitors.Create project