Create your website from scratch or ready-to-use templates. Get all the power of graphic design tools and website builders. Visual interface, adaptive design settings, code editor, React components, all possibilities of CSSCreate Project
Website is composed of basic components similar to HTML tags such as Text, Image, and Вох.
Using themes you can create a consistent design for your site
Put the power of animation, effects, and transformations at your fingertips.
Fine-tune your adaptive design
Make a component out of a single element or a collection of elements on the page or in the Layers panel. All of the props will be inherited by component copies that are added to the page.
Additionally, you can include pre-made blocks like maps, videos, pop-ups, and much more.
Customizing design with breakpoints
Your website is designed to look great on all devices, including tablets and smartphones.
Adding and editing breakpoints
In the project theme, you can modify already-existing breakpoints or add new ones.
You decide where to place the elements. Move them wherever you want, or nest them in other elements.
You can drag and drop multiple elements to a different location, remove them, or change their styles while they are selected.
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.
If you need to go up and down the hierarchy of elements, double-click them. If you want to dive into 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.
By activating the "hover" prop and positioning the desired props, you can change how an element appears, for example in a hover state.
Google Fonts Connection
Give your website design a unique look by choosing from the library of 990+ font families.
Unsplash is one of the most popular free image stocks. Search and select images directly from the Quarkly interface
Enjoy categorized style and functional properties.
This section allows you to configure the display properties of elements.
You can change text styles by using special properties in this section.
Margin and padding configuration is available here.
Here you'll find some props to help you set up element backgrounds.
Borders and border radius can be set up here.
With this category, you can fine-tune element position and z-index settings.
The smooth movement from one state to another for an element is enabled by this property.
This property gives you the power to transform your element in a variety of ways, like rotating or zooming.
Create custom React components using the code editor
Custom React components can be made in Quarkly's code editor and then inserted onto the page.
The pages are written in JSX code typical for React.js.
Hot import from NPM
You can import modules to your component from NPM in a few clicks.
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
Export your projects to Gatsby, a highly regarded static site generator.
Pushing commits to your GitHub repository
Making a GitHub repository for your project and committing changes can be done with ease.
Publication on Netlify
Once everything is complete, publish your website on Netlify using a technical domain name.
Modern built-in code editor
The Quarkly editor contains all of the page's entities.
Errors in the component code or pages can be seen in the debug console.
Tooltips in the code
The editor is here to help with property spelling — just start typing.
Synched pages and code editor
Changes made to a page are reflected in the code and vice versa.
Join forces with your team using the Quarkly collaboration tool, all it takes is an invitation.
You can use every component as a tag. Just choose the “as” property value that you need.
You can set desired attributes to elements in the code editor.
This is a separate property of the “Image” element.
Customize your device icons and set individual tile background color on Windows 10.
Open graph and meta tags
Configure these settings to display your website correctly in search engine results and social media.
Clean URLs will help you improve your site's SEO.
Robots.txt and sitemap.xml
These files are created automatically, but you can edit them as you see fit.
We provide Quarkly for free as long as we can, and then the lowest price among competitors.Create project