Choose from one of many pre-made blocks. Use pre-made React components or build your own. Get all the power of graphic design tools and website buildersCreate Project
A website is made up of fundamental elements similar to HTML tags. For example, Text, Image, and Вох.
A consistent design for your site is attainable with the use of themes.
By including unique layouts, animations, effects, and transformations, you can increase the usefulness of your websites.
Fine-tune your adaptive design
On the Layer panel, choose the element or group of elements you want to convert to a component. All of the props will be inherited if you add duplicates of the components to the page.
Take advantage of the ready-made blocks such as maps, videos, pop-ups, and more
Customizing design with breakpoints
Guarantee a 100% adaptive website by using design solutions that cater to elements at breakpoints.
Adding and editing breakpoints
You can create, edit, or delete custom breakpoints in the project theme.
Move elements around, place them however you want on the page, or nest them in other elements.
You can apply styles to multiple elements at once and move them around, as well as remove them.
If needed, you can change part of the text into bold or italic, link or convert it to span, or edit its style.
Navigate the hierarchy of elements with a double click. Hold down Ctrl on Windows or Cmd on MacOS to dive deeper.
Support of Flexbox and Grid
We're thrilled to provide you with the top frontend coding techniques available.
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
Let your website design express your brand's personality by connecting fonts from a library with more than 990 font families.
One of the most well-liked free photo sites is Unsplash. From the Quarkly interface, you can search for and choose images.
Style and utility characteristics are categorized here.
Here you will find the element display properties.
To find the text style properties, go to this section.
Adjust margins and paddings with ease in these settings.
In this section, you can find props for element backgrounds.
The properties for borders and border radius can be found here.
Element position and z-index settings can be adjusted in this category.
This property helps an element move smoothly from one state to another.
With the help of this property, you can rotate or zoom an element.
Create custom React components using 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
Importing modules to your component from NPM has never been easier.
Optimize your site to promote it on search engines.
There is just one thing to do if you want to finish or host your project on your server: export it into an archive with a create-react-app project!
Fine-tune elements in the code editor.
Export to Gatsby Project
You can export your projects to Gatsby — one of the best open source Static Site Generators.
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
When your site is complete, publish it on Netlify for an automatically generated technical domain, like https://inspiring-beaver-d128ed.netlify.app.
Modern built-in code editor
All of the page's entities are visible in the editor.
Keep an eye on component code and page errors with the help of the debug console.
Tooltips in the code
If you don't know exactly how to spell a property, start typing and the editor will help you.
Synched pages and code editor
As you make changes to the pages, the changes display in the code and vice versa.
Quickly invite teammates to work on your projects in Quarkly.
You can use every component as a tag. Just choose the “as” property value that you need.
In the code editor, you can give items the desired attributes.
The "Image" element has a distinct property for this.
This feature helps you install unique icons for all devices and individual tile background color for Windows 10.
Open graph and meta tags
These settings will help your site display correctly on social networks and in search engines.
You may increase the SEO of your site by using clean URLs.
Robots.txt and sitemap.xml
These files are automatically produced. But if necessary, you can alter them.
We provide Quarkly for free as long as we can, and then the lowest price among competitors.Create project