Visual interface, adaptive design settings, code editor, React components, all possibilities of CSS. All-in-one website builder on React — Quarkly. Get all the power of graphic design tools and website buildersCreate Project
These are the fundamental elements, which are similar to HTML tags: Text, Image, Box, and others.
Themes can help you design your website consistently.
Make your websites more useful by adding original layouts, animations, effects, and transformations.
Fine-tune your adaptive design
Any combination of elements on the page or in a layer can be used to create reusable components. The component inherits all of its original properties when you add it to a page.
Use the ready-made blocks such as maps, videos, pop-ups, and more to enhance 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
Use your personal breakpoints or select one of the ones already in place.
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 link certain passages of text, make them bold or italic, or both. You can choose the font face, size, and color as well.
The double click allows you to move up and down the hierarchy of elements. Hold down the Ctrl key on Windows or the Cmd key on a Mac to enter the hierarchy.
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 appearance of an element, such as changing its behavior on hover, just enable "hover" and set up the desired props.
Google Fonts Connection
Use fonts from a library that has over 990 font families in it to make your website look more colorful.
Utilize Unsplash, one of the most widely used free image banks, to choose images directly from the Quarkly interface.
Enjoy a friendly interface with categorized styles and useful properties.
You can find the element display properties under this section.
To change the style of your text, use special properties in this section.
To set margins and paddings, open these settings.
Here you'll find some props to help you set up element backgrounds.
Here you can adjust borders and border radius.
Element position and z-index settings can be adjusted in this category.
The smooth movement from one state to another for an element is enabled by this property.
You can transform the element using this property, for instance, rotate or zoom.
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
Importing modules from NPM to your component is a breeze.
Optimize your site to promote it on search engines.
If you want to finish or host your project on your server, there is only one thing you need to do: export it as an archive using a create-react-app project.
Fine-tune elements in the code editor.
Export to Gatsby Project
With just a few clicks, export your projects to Gatsby, a well-known static site generator.
Pushing commits to your GitHub repository
If needed, you can create a GitHub repository for your project and commit changes.
Publication on Netlify
When it's ready, publish your website on Netlify. It will automatically create a technical domain.
Modern built-in code editor
The editor displays all the entities of the page.
Component code or page errors can be detected in the debug console.
Tooltips in the code
Don't let spelling uncertainties hold you back — start typing and the editor will guide you.
Synched pages and code editor
Any adjustments you make to the pages will also be reflected in the code, and vice versa.
Profit from the Quarkly collaboration tool by inviting your colleagues to work on a project with you.
Any part can serve as a tag. Just choose the "as" property's desired value.
In the code editor, you can provide items the required characteristics.
A separate property belonging to the “Image” element.
Make your devices stand out with unique icons and personalized tile background color on Windows 10.
Open graph and meta tags
Optimize the display of your site in search engine results and on social media with these settings.
Clean URLs will help you improve your site's SEO.
Robots.txt and sitemap.xml
You can further change these automatically generated files.
We provide Quarkly for free as long as we can, and then the lowest price among competitors.Create project