Landing page editor for software engineers.
Meet Quarkly.
Create your website from scratch or ready-to-use templates. Use pre-made React components or build your own. Choose from one of many pre-made blocks
Create Project
Absolute creative control of your design.
Primitives
Primitive content elements function similarly to HTML tags. For example, Text, Image, and Вох.
Themes
Themes make it easy to create a consistent look for your website.
Extended Styling
Make your websites more useful by adding original layouts, animations, effects, and transformations.
Adaptive design
Fine-tune your adaptive design
Components
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.
Ready-made Content
Add maps, videos, pop-ups, and more to your site with ready-made blocks.
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 add custom breakpoints or edit existing ones in the project theme.
Drag'n'Drop
Element placement options include dragging and dropping, nesting, and arranging them however you like on the page.
Multiselect
You can select multiple elements and move them to another location, remove them, and more.
Text editor
Style text as desired, make it bold or italic, turn it into a link or convert it to span, the choice is yours.
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 change the appearance of an element, for example, the way it behaves on hover, just enable "hover" and set up the desired props.
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
Use Unsplash, one of the most popular free image stocks that provide images you can use directly without downloading.
Props panel
Enjoy categorized styles and functional properties in a friendly interface.
Layout
This section lets you control how elements appear.
Typography
Use the properties in this section to change the text's appearance.
Indents
You can configure margins and paddings in these settings.
Background
This section offers props for setting up element backgrounds.
Borders
You can define borders and border radius using these options.
Position
Here, element position and z-index can be adjusted through these settings.
Transition
This property makes an element move 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
You can build custom React components in the Quarkly code editor and after that add them to the page.
React.js
The pages are written in JSX code typical for React.js.
Hot import from NPM
You can import modules to your component from NPM in a few clicks.
SEO
Optimize your site to promote it on search engines.
Export CRA
To wrap up your project or host it on your server, simply export it into an archive using 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
You can establish a GitHub repository for your project and submit updates there if necessary.
Publication on Netlify
Once your site is ready, publish it on Netlify with a domain name like inspiring-beaver-d128ed.netlify.app.
Modern built-in code editor
The editor displays every entity on the page.
Debugger
Our debug console will help you track errors in the component code and pages.
Tooltips in the code
If you have doubts about how to spell a property, start typing, and the editor will auto-complete what you're writing.
Synched pages and code editor
Any adjustments you make to the pages will also be reflected in the code, and vice versa.
Remarkable opportunities for business.
Collaboration
Utilize the Quarkly collaboration tool to work on a project with your teammates; all you need to do is invite them.
Semantic tags
Any element can serve as a tag. Simply choose the required "as" property value.
Schema.org
You can add necessary attributes to elements in the code editor.
Image ALT
A separate property belonging to the “Image” element.
Favicons
You can use unique icons for different devices and change the background color of Windows 10 tiles.
Open graph and meta tags
These settings will help your website look its best 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
Automated file creation with the option to edit as desired.
Landing page editor for software engineers.
Try it for free.
We provide Quarkly for free as long as we can, and then the lowest price among competitors.
Create project