Landing page builder for marketer.
Meet Quarkly.
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 builders
Create Project
Full control over the design.
Primitives
A website is made up of fundamental elements similar to HTML tags. For example, Text, Image, and Вох.
Themes
A consistent design for your site is attainable with the use of themes.
Extended Styling
By including unique layouts, animations, effects, and transformations, you can increase the usefulness of your websites.
Adaptive design
Fine-tune your adaptive design
Components
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.
Ready-made Content
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.
Drag'n'Drop
Move elements around, place them however you want on the page, or nest them in other elements.
Multiselect
You can apply styles to multiple elements at once and move them around, as well as remove them.
Text editor
If needed, you can change part of the text into bold or italic, link or convert it to span, or edit its style.
Deep select
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.
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
Style and utility characteristics are categorized here.
Layout
Here you will find the element display properties.
Typography
To find the text style properties, go to this section.
Indents
Adjust margins and paddings with ease in these settings.
Background
In this section, you can find props for element backgrounds.
Borders
The properties for borders and border radius can be found here.
Position
Element position and z-index settings can be adjusted in this category.
Transition
This property helps an element move smoothly from one state to another.
Transform
With the help of this property, you can rotate or zoom an element.
Development capabilities.
Supercharged.
Create custom React components using the code editor
You can build and add custom React components to your Quarkly pages using the code editor.
React.js
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.
SEO
Optimize your site to promote it on search engines.
Export CRA
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!
Code Editor
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.
Debugger
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.
Remarkable opportunities for business.
Collaboration
Quickly invite teammates to work on your projects in Quarkly.
Semantic tags
You can use every component as a tag. Just choose the “as” property value that you need.
Schema.org
In the code editor, you can give items the desired attributes.
Image ALT
The "Image" element has a distinct property for this.
Favicons
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.
User-friendly URL
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.
Landing page builder for marketer.
Try it for free.
We provide Quarkly for free as long as we can, and then the lowest price among competitors.
Create project