Introduction

Welcome to the Layro Documentation 📘

This guide will help you get familiar with Layro, explain its core concepts, and show you how to integrate it into your product.
Whether you are a developer, designer, or product manager, Layro is designed to make your workflow smoother and your product more adaptable.

What is Layro?

Layro is a remote configuration and design system management platform.
It enables you to build once, update remotely, ensuring your applications stay consistent, adaptable, and easy to evolve.

With Layro, you can:

Centralize product configuration in one place.
Manage design tokens (colors, typography, spacing, radii, etc.).
Toggle features dynamically with flags and rollout strategies.
Send product announcements and messages directly to your apps.
Integrate SDKs and APIs for seamless multi-platform support.

Why Layro?

Modern products evolve quickly. Teams need tools to:

Reduce time to market.
Keep design and development synchronized.
Roll out features progressively and safely.
Make global changes without requiring new app releases.

Layro solves this by giving you a single source of truth for design and configuration.
Instead of hard-coding values or redeploying for every update, you can control everything remotely.

npm i @layro/sdk

Configure your credentials

.env

LAYRO_API_URL=https://api.layro.app
LAYRO_API_KEY=YOUR_SERVER_OR_CLIENT_KEY
LAYRO_ENV=production

Initialize the client

src/layro.ts

import { createLayroClient } from '@layro/sdk'

export const layro = createLayroClient({
  apiUrl: process.env.LAYRO_API_URL!,
  apiKey: process.env.LAYRO_API_KEY!,
  env:    process.env.LAYRO_ENV!
})

Use in your components

src/App.tsx

import { useEffect, useState } from 'react'
import { layro } from './layro'

export default function App() {
  const [primary, setPrimary] = useState<string>()
  const [isNewUI, setIsNewUI] = useState<boolean>(false)

  useEffect(() => {
    async function loadConfig() {
      setPrimary(await layro.tokens.get('color.primary'))
      setIsNewUI(await layro.flags.isEnabled('new-ui'))
    }
    loadConfig()
  }, [])

  return (
    <div style={{ backgroundColor: primary }}>
      <h1>Welcome to Layro</h1>
      {isNewUI && <p>New UI is enabled 🎉</p>}
    </div>
  )
}

Update remotely, no redeploy

Change tokens, flags, or config in Layro → your app fetches the latest values automatically, so you don’t redeploy for updates.

Documentation Structure

Here’s how this documentation is organized:

Getting Started → Installation, authentication, and basic usage.
General Settings → Manage environments, projects, and versions.
Design → Define and distribute your design tokens.
Internationalization → Handle multiple locales and translations.
Features → Work with feature flags and rollout strategies.
Dynamic Content → Manage content that updates in real-time.
Product Config → Store variables, settings, and modes.
Notifications & Messages → Send banners, announcements, and alerts.
Integrations → SDKs, CLI, webhooks, and logs.
Users & Roles → Manage team members and access rights.