Quarkly

What Quarkly is

Quarkly is a no-code and low-code builder for websites and web apps that produces React sites. Its homepage calls it a "design tool for creating websites and web apps" and a "No-code / Low-code platform," and invites you to "build ready-to-use React websites and apps." Another of its pages describes it as an "All-in-one website builder on React." The site splits its audience 3 ways: web designers, web developers and web entrepreneurs.

The product is a visual editor with a code editor beside it, so a designer can lay out a page and a developer can write the components that sit on it, and both work on the same project at the same time. The result is a real React project rather than a page locked inside a hosted builder, which shapes everything about how you publish and who the tool suits.

What you build and how

Quarkly's pages are written in JSX, the syntax typical of React.js, and the visual interface is a layer over that code. You can start from scratch or from ready-to-use templates, and the company describes the offer as "Visual interface, adaptive design settings, code editor, React components, all possibilities of CSS." Pre-made blocks give a quicker start, and the interface itself covers zoom and pan, a props panel, a layer panel and keyboard shortcuts.

For designers, the canvas supports drag and drop, nesting elements inside other elements, and multiselect so you can restyle, move or remove several elements at once. Deep select lets you move up and down the element hierarchy with a double click, holding Ctrl on Windows or Cmd on macOS to dive deeper. A props panel groups style properties into Layout, Typography, Indents (margins and paddings), Background, Borders (including border radius), Position with z-index, Transition and Transform, the last covering zoom and rotation. The editor supports Flexbox and Grid, and you configure hover, active and focus pseudo-class styles by switching on the matching prop and setting how the element should look in that state.

Responsive design runs through breakpoints. You can add custom breakpoints or edit the ones in the project theme, and set different design choices per element at each one, so a layout can change shape on a phone without a separate mobile page. Themes keep a consistent look across a project. The Extended Styling area covers layouts, animations, effects and transformations, and the feature list adds positioning options (static, relative, absolute, sticky, fixed), custom cursors, animation, filters and blending.

Reusable pieces come from components: select an element or group in the page or the Layers panel, group it into a component, and copies inherit their properties from the original. The homepage says components support dependencies and overrides, and the feature list names a components catalog with both design components and code components. Primitives are the basic building blocks, "similar to HTML tags," such as Text, Image and Box. Ready-made blocks such as maps, videos and pop-ups can be dropped in. A text editor handles bold, italic, links and converting part of the text to a span with its own style. The editor connects Google Fonts, which the pages put at more than 990 font families, and Unsplash images that you can search and pick from inside the interface.

For developers, the code editor displays the entities of the page and stays synched with it, so edits in the canvas show up in the code and the other way around. You can write your own React components in the editor and add them to a page, and you can hot-import modules from NPM into a component, which the homepage frames as access to "thousands of community packages." The editor gives code hints as you type a property, and a debugger shows errors in component code or pages in a debug console.

Publishing and export are where Quarkly differs from a hosted-only builder. The homepage lists these routes under Export & Publication: create-react-app, Gatsby, commit to GitHub, publish on Netlify and download as a zip. The company describes the create-react-app route as the one to use "if your goal is to host a project on your server," and calls Gatsby a popular static site generator. You can also create a GitHub repository for a project and push commits to it, which lets a development team carry the code forward in its own workflow. Publishing to Netlify gives you an automatically generated address on a netlify.app or netlify.com subdomain, with an example like inspiring-beaver on the page.

For search and sharing, every component can act as a semantic tag through an "as" property, and the editor lets you set schema.org attributes in the code editor, image ALT text as a property of the Image element, favicons for different devices (including a tile background color for Windows 10), Open Graph and meta tags, and friendly page URLs. Robots.txt and sitemap.xml are created automatically and can be edited later.

Collaboration is lightweight. The homepage says you send colleagues an invitation link and work on a project together, and the entrepreneur section repeats the point as working together as a team.

What the pages state about plans and support

The site publishes no prices. The commercial statement on the homepage and the other pages is "We provide Quarkly for free as long as we can, and then the lowest price among competitors," under a heading inviting you to try it for free. That makes the current offer a free product, with paid terms still to come.

There is a community: a Discord where users can "discuss the latest updates, ask questions, request new features" and share their projects with the team and other users. The menu also carries an updates section, resources and a contact page, and a banner invites users to fill out a survey and notes that the company is hiring.

The site frames the same feature set for 3 readers. Designers get "Absolute design control," developers get "Development capabilities," and entrepreneurs get "Great business opportunities": the SEO settings, team collaboration and automatic robots.txt and sitemap.xml.

Who it suits and who it does not

Quarkly suits front-end designers and developers who want visual layout tools without giving up React. A freelancer or agency building marketing sites can design visually, then export a create-react-app or Gatsby project or push the code to GitHub for a client's own developers. The code stays portable, since the export routes produce standard project formats and you are not tied to Quarkly for hosting. A small team where a designer and a developer share one project gets the most from the synced canvas and code editor.

It is a tighter fit for someone who values the synced code editor than for someone who has never worked with web layout. The property names, breakpoints and pseudo-class settings assume you know CSS concepts. A business owner who wants a finished site from a template and nothing else may find the props-panel approach slower than a conventional site builder.

2 caveats are worth planning around. First, the pages describe design, code and publishing rather than content management, a database or a store, so a site that needs editors or checkout would need those pieces added in code. Second, the free offer runs "as long as we can," so the long-term cost depends on terms the company has yet to set.