Vev's library of built-in components might not be enough for you or your team to create all of your dreams. For those times, we have created a tool for you to create your own, using React and CSS, while making them feel like they were always a part of Vev.

Building your own React components

Use the tool Vev uses

The Code Editor is the same powerful tool for Vev's users as it is for Vev's team, and allows anyone to create building blocks that act and feel like built-in first-party components.

Visual styling of CSS

“Let's try again without border radius”

When creating a component, blanks in the CSS can be left for designers to change with visual editors, and without touching the code. No more trying back and forth with 1 or 5 pixels of padding. Leave that to the designers.

border-radius: vev();

Vev is magic, even for CSS. By using our macro, all changes to a property can be done from the Editor, or even set from saved Styles or using editable color palettes.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

.holder {
overflow: hidden;
border-radius: vev(2px);
background: vev(#ccc);
color: vev(white);
}

.content {
opacity: 0.7;
transition: opacity 0.2s ease-out;

&:hover {
opacity: 1;
}
}

Content Forms

“What if we made the header shorter?”

The same way blanks can be left in the styling, blanks can be left for content as well. Define forms to allow your content creators to fill in content such as text, links, videos, and even lists of all of the above.

<TextField
name="customerName"
default="The Council of Ricks"
/>
<TextField
name="customerLink"
default="https://www.youtube.com/watch?v=dQw4w9WgXcQ"
/>
<ArrayField name="characters" carousel>
<TextField name="name" label="Full name" />
<LinkField name="link" label="Wiki link" />
</ArrayField>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

Reusability 101

With the ability to have your designers change colors, branding and styling, and to have your content creators be able to change the contents of your components, things can be used over and over again.

This will allow developers to focus on creating new powerful features, not on making minor visual adjustments to see if it works.

VEV.DESIGN

Vev widgets are React components.
This allows you to both use components that have already been developed and to build new ones with the skills you already have. No need to reinvent the wheel or learn a new set of skills.

When a component is finished, it can be shared and used by your whole team, a single workspace, or single users.

Since all development is done using familiar and popular libraries and frameworks, help is always just a Google search away.

Here we help you get going with an example of a whole component, and documentation of available Hooks and Helpers.

1
2
3
4
5
6
7

import { Image } from 'vev'’

export default ({ image, text }: Props) =>
<div className="button">
<Image src={image} />
<span>{text}</span>
</div>