Use pre-made React components or build your own. Create your website from scratch or ready-to-use templates. Visual interface, adaptive design settings, code editor, React components, all possibilities of CSSCreate Project
These are the most basic components similar to HTML tags: Text, Image, Вох, and others.
You can use themes to create a consistent design for your site.
Bring life into your web page with stylish animations, effects, and transformations.
Fine-tune your adaptive design
Select a single element or multiple elements on the page or Layer panel and convert them into a component. Place component copies on the page and enjoy the inheritance of all properties.
Add ready-made blocks: maps, videos, pop-ups, and many more
Customizing design with breakpoints
By creating various solutions for elements at breakpoints, you can ensure that your website is mobile-friendly.
Adding and editing breakpoints
In the project theme, you may want to add custom breakpoints or edit existing ones.
You choose where to put the elements. You can move them around 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 link certain passages of text, make them bold or italic, or both. You can choose the font face, size, and color as well.
To move through the elemental hierarchy, double-click. Hold down the Ctrl key on Windows or the Cmd key on Mac OS to enter the hierarchy.
Support of Flexbox and Grid
Quarkly embraces the latest and greatest in frontend coding methods.
Configuring styles of pseudo-classes hover/active/focus, etc.
To change the way an element looks like, for example, how it appears on hover, just enable "hover" and configure the desired props.
Google Fonts Connection
The library of over 990 font families will help make your site look more beautiful.
Unsplash is a popular free image stock. You can search and select images directly from the Quarkly interface.
Take advantage of the categorized style and functional props.
This section allows you to configure the display properties of elements.
To change the style of your text, use special properties in this section.
Margin and padding configuration is available here.
Props in this section help create the backgrounds for the elements.
In this section, you can adjust borders and border radius.
You can change the element position and z-index settings in this category.
An element can transition from one state to another more easily thanks to this property.
You can transform the element using this property, for instance, rotate or zoom.
Create custom React components using the code editor
The Quarkly code editor allows you to create unique React components and then place them on 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 of the final steps to complete your project is to 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 most well-liked static site generators, Gatsby, is one to which you can export your projects.
Pushing commits to your GitHub repository
Create a GitHub repository for your project and commit changes as you work.
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.
Errors in the component code or pages can be tracked by viewing the debug console.
Tooltips 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
All changes made to the pages are displayed in the code and vice versa.
Check out the Quarkly collaboration tool: send an invite to your teammates to work on a project with them.
Component-to-tag transformation made simple with the right "as" property value selection.
You can give any element the required characteristics in the code editor.
An individual property is provided for 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.
Enhance your site's visibility in search engines and ease of use with user-friendly URLs.
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