Visual interface, adaptive design settings, code editor, React components, all possibilities of CSS. Use pre-made React components or build your own. Choose from one of many pre-made blocksCreate Project
A website is made up of fundamental elements similar to HTML tags. For example, Text, Image, and Вох.
Create a professional-looking design easily by using themes.
Boost your websites' functionality with distinctive layouts, 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.
Add videos, pop-ups, customized blocks, and much more to your site.
Customizing design with breakpoints
By employing various design solutions for elements at breakpoints, your website functions flawlessly on mobile devices.
Adding and editing breakpoints
You can add custom breakpoints or edit existing ones in the project theme.
Move elements around, place them however you want on the page, or nest them in other elements.
Use the multi-select feature to apply styles, move, remove, or perform other actions on multiple elements.
A portion of the text can be changed by applying any style, making it bold or italic, linking to it or making it a span.
You can go up and down the hierarchy of elements using the double click. If you want to dive into the hierarchy, on Windows hold down the Ctrl key and on MacOs the Cmd key.
Support of Flexbox and Grid
At Quarkly, we keep up with the up-to-date frontend coding approaches.
Configuring styles of pseudo-classes hover/active/focus, etc.
To change the element appearance, for example, the way it behaves on hover, enable "hover" and apply the desired props.
Google Fonts Connection
To make your site design look more professional go and use a library of more than 990 font families.
Make use of Unsplash, one of the most popular free image stocks where you can select images directly from the Quarkly interface
This offers categorized style and functional properties.
This section lets you control how elements appear.
Go to this section to find text style properties.
Open these settings to configure margins and paddings.
This section offers props for setting up element backgrounds.
Here you can configure border and border radius.
You can change the element position and z-index settings in this category.
You can ensure a smooth transition between states of an element with this property.
Use this property to seamlessly transform your element, for example, by rotating or zooming.
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
You can easily import modules from NPM to your component.
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
Export your projects to Gatsby, a highly regarded static site generator.
Pushing commits to your GitHub repository
Want to add modifications to a GitHub repository you've created for your project? Well, you can. With Quarkly.
Publication on Netlify
Publish your site on Netlify when it's ready. A technical domain will be generated automatically, for instance: https://inspiring-beaver-d128ed.netlify.app.
Modern built-in code editor
You can monitor all the entities on the page in the Quarkly editor.
You can track issues in the component code and pages with the aid of our debug console.
Tooltips in the code
As you type, the editor will suggest possible matches to the property you're looking for.
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.
Utilize the Quarkly collaboration tool to work on a project with your teammates; all you need to do is invite them.
Any element can serve as a tag. Simply select the "as" property value you require.
In the code editor, you can assign necessary attributes to elements.
A separate property belonging to the “Image” element.
Install distinctive device icons and a customized Windows tile backdrop color.
Open graph and meta tags
These settings will help your website look its best 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
These files are created automatically. But you can edit them if needed.
We provide Quarkly for free as long as we can, and then the lowest price among competitors.Create project