Landing page maker for full stack coders.
Meet Quarkly.
Get all the power of graphic design tools and website builders. All-in-one website builder on React — Quarkly. Visual interface, adaptive design settings, code editor, React components, all possibilities of CSS
Create Project
Full control over the design.
Primitives
Primitive content elements function similarly to HTML tags. For example, Text, Image, and Вох.
Themes
You can use themes to create a consistent design for your site.
Extended Styling
Supercharge your sites with unique layouts, animations, effects, and transformations
Adaptive design
Fine-tune your adaptive design
Components
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.
Ready-made Content
Take advantage of the ready-made blocks such as maps, videos, pop-ups, and more
Customizing design with breakpoints
Different design solutions will be used for elements at breakpoints as your website automatically adapts to different screen sizes.
Adding and editing breakpoints
Choose from the preset breakpoints or use your own.
Drag'n'Drop
Place elements however you want on the page — that is your choice. You can drop them in the desired area, or nest them in other ones.
Multiselect
You can pick multiple elements, modify their styles, move them to a different location, delete them, and more.
Text editor
You can turn a part of the text into italic or bold, make it a link or convert to span, and use any style for it.
Deep select
Use the double click to move up and down the hierarchy of elements in your document. If you need to go inside the hierarchy, hold down the Ctrl key on Windows and the Cmd key on MacOs.
Support of Flexbox and Grid
The most cutting-edge methods of front-end coding are supported by Quarkly.
Configuring styles of pseudo-classes hover/active/focus, etc.
To alter how an element appears, for instance in a hover state, activate the "hover" prop and arrange the desired props.
Google Fonts Connection
By incorporating fonts from a collection of more than 990 font families, you can give your website design more expression.
Unsplash images
One of the most well-liked free photo sites is Unsplash. From the Quarkly interface, you can search for and choose images.
Props panel
Make use of organized and categorized style and functional properties to improve your project.
Layout
Here you can change the way elements appear.
Typography
You can change text styles by using special properties in this section.
Indents
Open these settings to configure margins and paddings.
Background
This section offers props for setting up element backgrounds.
Borders
Here you can configure borders and border radius.
Position
In this category, you can change the settings for element position and z-index.
Transition
This property makes an element transit smoothly from one state to another.
Transform
You can rotate or zoom the element using this property, for example.
Development capabilities.
Supercharged.
Create custom React components using the code editor
With the Quarkly code editor, you can create custom React components and then use them on a webpage.
React.js
The pages are written in JSX code typical for React.js.
Hot import from NPM
Import modules from NPM quickly, if you need to.
SEO
Optimize your site to promote it on search engines.
Export CRA
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.
Code Editor
Fine-tune elements in the code editor.
Export to Gatsby Project
One of the best open-source SSGs, Gatsby, may be used to export your projects in no time.
Pushing commits to your GitHub repository
You can create a GitHub repository for your project and commit changes.
Publication on Netlify
Once it is complete, publish your website on Netlify. It will automatically generate a technical domain.
Modern built-in code editor
The Quarkly editor contains all of the page's entities.
Debugger
You can keep track of component code and page errors with the debug console.
Tooltips in the code
If you are not sure how to spell a property, start typing and the editor will help you.
Synched pages and code editor
Changes made to a page are reflected in the code and vice versa.
Unbeatable opportunities for business.
Collaboration
Work on projects with your teammates using the Quarkly collaboration tool, just send them an invite.
Semantic tags
Transform components into tags with ease by choosing the right "as" property value.
Schema.org
In the code editor, you can assign desired attributes to any element.
Image ALT
This is a separate property of the “Image” element.
Favicons
You can install distinctive icons for every device and a custom tile backdrop color for Windows with this functionality.
Open graph and meta tags
These settings will help your site display correctly on social networks and in search engines.
User-friendly URL
This feature allows you to set friendly URLs for your pages.
Robots.txt and sitemap.xml
These files are automatically created. But you can edit them if necessary.
Landing page maker for full stack coders.
Try it for free.
We provide Quarkly for free as long as we can, and then the lowest price among competitors.
Create project