For designers

A collaborative development environment where designers and product managers work alongside engineers on real, deployed software.

Code

editor-dashboard-content.tsx

"use client";
 
import * as React from "react";
import { ChevronDown, ChevronUp, ChevronsUpDown, Database } from "lucide-react";
 
import tableRows from "@hero-app/data/editor-dashboard-table.json";
import { Button } from "@hero-app/components/ui/button";
import {
  DashboardIcon,
  InfoIcon,
  OrganizationIcon,
  ProjectsIcon,
  SettingsIcon,
  StocksDownIcon,
  StocksUpIcon,
} from "@hero-app/components/ui/icons/nav-icons";

Select element to see properties

Code

editor-dashboard-content.tsx

"use client";
 
import * as React from "react";
import { ChevronDown, ChevronUp, ChevronsUpDown, Database } from "lucide-react";
 
import tableRows from "@hero-app/data/editor-dashboard-table.json";
import { Button } from "@hero-app/components/ui/button";
import {
  DashboardIcon,
  InfoIcon,
  OrganizationIcon,
  ProjectsIcon,
  SettingsIcon,
  StocksDownIcon,
  StocksUpIcon,
} from "@hero-app/components/ui/icons/nav-icons";

Select element to see properties

Turn your product into a workspace

Soffi creates a shared environment where teams work on a live version of their product. Each workspace is connected to your codebase, design system, and data.

One-click pull request previews

Connect your repositories and spin up a live environment from any branch or PR.

Sync status

61 updates available

Fetch repository

Compare workspace → Repo

Refresh local state

Sync status

61 updates available

Fetch repository

Compare workspace → Repo

Refresh local state

Frank Fixed: Dashboard Layout grid

a889aiu

Agus Fixed: Title text animation speed

a854arq

Agus Fixed: Button-primary hover interaction

a840afg

Fernando Fixed: Crossfade skeleton content

a821aec

Open, review, edit, and ship changes from pull requests

Deploy previews from GitHub with one click

Collaborate and push changes to the same branch or PR

Open, review, edit, and ship changes from pull requests

Deploy previews from GitHub with one click

Collaborate and push changes to the same branch or PR

Collaborate in context

Feedback happens directly on the product.

C
Charlieshared a Video-Comment1d ago
JH
Jody Hekla4h ago
Sure, everything clear!
Reply to thread...

Inbox

JS
Jordan Smith shared insights on the Q2 Prod-Preview.
New
The 12px gap here breaks the 8pt grid. Nudge to 16px to stay consistent with the rest of the layout.
SL
Steve Lang shared insights on the Q2 Prod-Preview.
New
Body and caption feel too close in weight. Consider dropping the caption to 12px/400 or muting the color to 60% opacity
JS
Jordan Smith shared insights on the Q2 Prod-Preview.
New
Visually this feels left-heavy. The icon sits on the center but needs a couple pixels right to feel optically balanced.
JS
Jordan Smith shared insights on the Q2 Prod-Preview.
This button is using the ghost variant but the action here is primary. Swap to filled to reflect the hierarchy.
JS
Jordan Smith shared insights on the Q2 Prod-Preview.
Cards are at 8px radius, modal at 12px. Worth aligning these. The system uses 8px as the base token.

Design systemfrom code

Your design system is extracted from your codebase. Tokens and components reflect what is in production.

Button

Variant

State

Text

Icon

Edit your design system, see updates live, and ship changes as production-ready pull requests

border-success

Example

Width

Style

Color

ArrowA

Ask Soffi⌘ + K

Code⌘ + T

CommentC

Design⌘ + D

Select⌘ + E

HandH

History⌘ + H

NoteN

PenP

Preview⌘ + P

SelectV

Undo Last Action⌘ + Z

Zoom⌘ + /-

Edit your design system, see updates live, and ship changes as production-ready pull requests

border-success

Example

Width

Style

Color

Button

Variant

State

Text

Icon

Design System

NameLightDark

#F0F7F4

—

100

#DCEEE4

—

200

#B8DDCA

—

300

#88C5A6

—

Your workspace

FilesSymbolsTokens

AI grounded in your system

Soffi analyzes your codebase to build a working knowledge base of your product, design system, and architecture.

All generation and automation are based on your code, architecture, and data. Not generic models detached from your product.

12Hub Symbols

74Functions

99Total Symbols

4Interfaces

Search symbols by name, docstring, or signature...

Prototyping with validation

Prototype on your product and validate what to build using real customer data.

Insight match

87%

24 Customers calls12 Issues2 Tickets10 CS tickets2 PRDs

Analytics madeeasy

Make product decisions based on real data.

Integrate with PostHog for real-time heatmaps and events

Analytics

Overview

Daily active users

4.6K

Weekly active users

24.8K

Filters

Range

Heatmap

Type

Aggregation

Use customer data, benchmarks, and KPIs to guide decisions

Automatically track new UI changes

Deployment card

Integrate with PostHog for real-time heatmaps and events

Analytics

Overview

Daily active users

4.6K

Weekly active users

24.8K

Monthly active users

96.2k

Retention

78% (weekly)

Filters

Range

Heatmap

Type

Aggregation

Analytics madeeasy

Make product decisions based on real data.

Click events

9.6K total events

Deployments card22K
Total modals card14K
GPU Hours card8K
New platform icon4K

Untracked

icon-btndeploy4
icon-btnsidebar-toggle1
linkDashboard1
btndeploy6

Use customer data, benchmarks, and KPIs to guide decisions

Automatically track new UI changes

Built for product teams

Move from idea to production faster with fewer tools

Display-1

Built for product teams

Move from idea to production faster with fewer tools

Designers

Work on live interfaces and manage design systems from code

Engineers

Reduce back-and-forth and collaborate in a shared environment

Product Managers

Validate ideas, iterate, and build beyond prototypes

Role-based permissions with full auditability. Every action is logged and tied to your workflows.

Invite members

Role

Admin

Enter emails separated by a comma

Want to shape how enterprise teams build products?

Become a partner

Enterprise ready

Security check

Updated 3 minutes ago

SOC II Certified

SOC 2 Type II audit in progress. Systems are aligned with SOC 2 requirements and currently in the observation period

Data Privacy

We do not train on your code or data. Your IP remains private and under your control.

Want to know more about Privacy & Security?

Trust center

For designers|