Vev CLI: Bringing the Best of Low-Code and No-Code to Web Design

June 30, 2022

Words by Fredrik Jensen

Ever noticed how most no-code tools feel kind of one-sided? They promise inclusivity—allowing people of all technical ability to create on the web—yet only really speak to designers?

At Vev, we’re changing that. We want to use no-code to empower everyone in the creative process—developers, designers, strategists, and writers alike. That’s why we’re thrilled to introduce our shiny, new command-line interface (CLI).

While we’ve had an inbuilt React editor in Vev for a while now, our CLI will make it even easier and create even more possibilities for developers to build custom React components for the designers and content creators they work with.

It’s still in beta, but it’s pretty great. Here’s a quick run-through presentation of the CLI that I gave at June’s 2022 React Norway conference.

Designing No-Code to Include Developers

No-code can’t actually exist without code—behind every slick no-code component and element is a very talented developer. Yet, while no-code tools are great for non-technical creators, they often aren’t designed to include the creative technical experts that make them possible.

That’s pretty much why we built Vev: to combine the best of low-code and no-code in one space, bringing web developers and designers together as equals, not obstacles. Our Vev CLI is just one example of how no-code platforms can be designed to empower developers too.




Wait, what’s a CLI?
A command-line interface (CLI) is an application that runs in a computer’s command line (terminal). It accepts a set of commands and can be combined with user input, and has the benefit of accessing the operating system and the file system. Effectively, it enables developers to work more efficiently inside a platform like Vev, enjoying more control and flexibility in how they code.

What Can You Do with the Vev CLI?

With the Vev CLI, developers can create custom React components for their non-technical colleagues to easily adapt and reuse to create fully-responsive, interactive websites. Crucially, it lets developers work their way: working locally on their computer using their preferred code editor, set-up, and plugins.

Vev’s CLI also lets you use your own source control—giving you full ownership over your code—and easily use any existing React projects you may already have. If that wasn’t exciting enough, with a quick hot refresh other creatives can easily work on your new custom-coded components from Vev’s visual Design Editor, just as you would on localhost.

How to Use the Vev CLI

To get started, you just need to create a free Vev account, install the Vev CLI from NPM or Yarn, create a new project—or connect an existing one from somewhere else—and then add the @vev/react package. It’s worth noting that you need NodeJS to run the Vev CLI. You can find all documentation, commands, and information on getting started here.

If you have any feedback or questions, please share them with us in our friendly Discord community.

Installing the Vev CLI

1npm install -g @vev/cli
2
3vev login
4vev create [my-project]
5
6cd [my-project]
7vev init

Creating Your First Component:

1import React from 'react';
2import { registerVevComponent } from '@vev/react';
3
4const MyComponent = () => {
5  return <div>Hello, VeV</div>;
6}
7
8registerVevComponent(MyComponent, {
9  name: "My awesome component",
10});
11
12export default MyComponent;

Find out more in our new developer docs:
https://developer.vev.design/docs/cli/

Towards More Open No-Code Tech

Our CLI is just one of many plans to make a more intuitive and powerful experience for developers creating in Vev—alongside the work we are already putting into our Design and Content editors.

Long-term, we’d love to create a space where our developer community can share their coded components with each other, building on each others’ work and speeding up the transition to low-code/no-code web creation.

If you have any thoughts on what we can do to get there faster, please add them to our roadmap.



Ready to Give the Vev CLI a Spin?

Create a free Vev account and head to our Devevloper Hub for all documentation on how to get started.

Atmosphere, Dishware
Material property, Dishware, Serveware

Get our monthly newsletter straight to your inbox.
You can always unsubscribe at any time.
Privacy Policy

Want More Inspo?