Documentation

  • Getting Started
  • Using Visly from code
  • Version Control
  • Tokens
  • Layers
  • Primitives
  • Interaction States
  • Variants
  • Props & Slots
  • Composition & Inner Components
  • Built-ins
  • Responsive Design

Tutorials

  • Using Visly with Create React App
  • Using Visly with Next.js
  • Using Visly with Gatsby
  • Creating stateful components
  • Routing with Visly
  • Using variants for responsive design
  • Create dynamic UI with inner components
  • Reuse existing components with Slots

Documentation

Layers

Layers are the main building blocks of components in Visly. Using these layers, you can create almost any component you would want for your application. This document will cover the basic layers, which are used for layout, displaying content, and interfacing with code. However, Visly also supports composition by using other components as layers - this is covered in Composition & Inner Components. Lastly, there are certain components that require specialized layers, input fields being one example. This type of component is covered by Primitives.

Containers

Containers in Visly are based on flexbox and allow you to add other layers as children. A container can be configured to stack its children vertically (column) or horizontally (row). Containers also support common properties such as backgrounds, borders, and padding. Containers can also be configured to overlay other layers - you can do this by setting their position property to absolute.

Spacers

Spacers in Visly are used for creating space / margin between other layers. The reason Visly uses spacer layers instead of margins is detailed in Layout-isolated components. The short answer is that margins can often be hard to use because it's not immediately clear which layer a margin is attached to, which can be problematic when swapping the positions of layers, since you'll need to move margins from one layer to another. This isn't a problem with spacer layers.

Text

Text layers in Visly do what you likely expect: they display a span of text within your component. You can configure their Tokens as well as the font and color of the text. Sometimes your application will have static text strings, but more commonly the text you want to display will come from some form of backend service or application state. When selecting a text layer, you can configure it to be a prop of the component by pressing the diamond button. When a text layer is configured as a prop, its text content is treated as a placeholder. Props & Slots.

Icon

Icon layers are for displaying Tokens. In addition to displaying the appropriate icon, Icon layers can also be configured with a tint color, as well as common styles such as dimensions and transforms.

Image

Image layers are for displaying an image. The image layer always has a prop (this defaults to imageSrc) that allows you to set the content to display in the image through code.

import { ComponentWithImage } from '../visly'

<ComponentWithImage imageSrc="http://placekitten.com/500/500" />

Slot

Slot layers serve a dual purpose in Visly. Their first purpose is to offer a way of reusing components that you've already created in code within your Visly component. A Slot in this case acts as a placeholder for a component that you pass it via a prop from code. Slots automatically translate to a prop on the component you're building. By default, the name of both the Slot layer and the prop on the component is children, which allows you to pass a component to this Slot as you would with any other component in React that accepts a children prop.

import { ComponentWithSlot } from '../visly'
import { CodeComponent } from '../ui'


<ComponentWithSlot>
    <CodeComponent />
</ComponentWithSlot>

You can also create components that have multiple Slots - in this case, it's better to give the Slots specific names.

import { ComponentWithSlots } from '../visly'
import { NavBar } from '../ui'
import { Footer } from '../ui'


<ComponentWithSlots
    NavBarSlot={<NavBar/>}
    FooterSlot={<Footer/>} />

The second purpose for Slots is to act as a container for multiple inner components or component references. This is incredibly powerful when creating more complex component, and is better covered in Composition & Inner Components.