Web page editor for product managers.
Meet Quarkly.
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 CSS
Create Project
Full control over the design.
Primitives
These are the most basic components similar to HTML tags: Text, Image, Вох, and others.
Themes
You can use themes to create a consistent design for your site.
Extended Styling
Bring life into your web page with stylish animations, effects, and transformations.
Adaptive design
Fine-tune your adaptive design
Components
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.
Ready-made Content
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.
Drag'n'Drop
You choose where to put the elements. You can move them around or nest them in other elements.
Multiselect
You can select multiple elements to set their styles, drag'n'drop them to another place, remove, etc.
Text editor
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.
Deep select
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 images
Unsplash is a popular free image stock. You can search and select images directly from the Quarkly interface.
Props panel
Take advantage of the categorized style and functional props.
Layout
This section allows you to configure the display properties of elements.
Typography
To change the style of your text, use special properties in this section.
Indents
Margin and padding configuration is available here.
Background
Props in this section help create the backgrounds for the elements.
Borders
In this section, you can adjust borders and border radius.
Position
You can change the element position and z-index settings in this category.
Transition
An element can transition from one state to another more easily thanks to this property.
Transform
You can transform the element using this property, for instance, rotate or zoom.
Development capabilities.
Supercharged.
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.
React.js
The pages are written in JSX code typical for React.js.
Hot import from NPM
Import modules to your component from NPM with ease.
SEO
Optimize your site to promote it on search engines.
Export CRA
One of the final steps to complete your project is to export it into an archive with a create-react-app project.
Code Editor
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.
Debugger
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.
Wonderful opportunities for business.
Collaboration
Check out the Quarkly collaboration tool: send an invite to your teammates to work on a project with them.
Semantic tags
Component-to-tag transformation made simple with the right "as" property value selection.
Schema.org
You can give any element the required characteristics in the code editor.
Image ALT
An individual property is provided for the "Image" element.
Favicons
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.
User-friendly URL
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.
Web page editor for product managers.
Try it for free.
We provide Quarkly for free as long as we can, and then the lowest price among competitors.
Create project