Network Canvas is a suite of applications for conducting network research interviews and data collection. This monorepo contains the core packages and applications that power the Network Canvas ecosystem.
Network Canvas helps researchers collect data about social, personal, and professional networks through intuitive interfaces and powerful data management tools.
This monorepo is organized into four main categories:
| App | Description |
|---|---|
architect |
Protocol designer application (Vite + React + Redux) for creating Network Canvas interview protocols |
architect-classic |
Legacy Electron build of Architect, the Network Canvas protocol designer (maintenance mode) |
interviewer |
Network Canvas Interviewer — offline-first PWA used to conduct interviews |
interviewer-classic |
Legacy Network Canvas Interviewer (Electron + Cordova), maintenance mode |
documentation |
Next.js documentation website with MDX support and search functionality |
| Package | Description |
|---|---|
@codaco/protocol-validation |
Zod schemas for validating and migrating Network Canvas protocol files |
@codaco/shared-consts |
Shared constants and TypeScript definitions for the Network Canvas project |
@codaco/interview |
Network Canvas interview engine — Shell component, synthetic network generator, and session contract |
@codaco/network-exporters |
Effect-TS pipeline for exporting Network Canvas interview data as CSV and GraphML |
@codaco/network-query |
Network filtering and querying utilities for Network Canvas |
@codaco/fresco-ui |
Fresco UI components, styles, and utilities built on Base UI and Tailwind CSS |
@codaco/art |
Visual design components using blobs and d3-interpolate-path for animated graphics |
@codaco/interface-images |
Generated responsive screenshots of every interview interface, with a React <picture> component |
@codaco/development-protocol |
Development protocol assets for testing Network Canvas applications |
| Worker | Description |
|---|---|
development-protocol-worker |
Cloudflare Worker for serving development protocol files from GitHub |
posthog-proxy-worker |
Cloudflare Worker for proxying PostHog analytics requests |
| Config | Description |
|---|---|
@codaco/tailwind-config |
Shared Tailwind v4 theme, color palette, and plugins for Fresco and other Codaco apps |
@codaco/tsconfig |
Shared TypeScript configurations |
oxlint |
Shared oxlint configurations (React and Tailwind rule sets) extended by workspaces |
- Node.js >= 20.0.0
- pnpm >= 10.0.0
git clone https://github.com/complexdatacollective/network-canvas-monorepo.git
cd network-canvas-monorepo
pnpm install# Start all applications in development mode
pnpm dev
# Build all packages and applications
pnpm build
# Run tests across all packages
pnpm test# Work with a specific package
pnpm --filter @codaco/protocol-validation build
pnpm --filter @codaco/architect dev
pnpm --filter @codaco/documentation dev
# Run commands across multiple packages
pnpm --filter "./packages/*" build
pnpm --filter "./apps/*" dev# Develop workers locally
pnpm --filter development-protocol-worker dev
pnpm --filter posthog-proxy-worker dev
# Deploy workers to Cloudflare
pnpm --filter development-protocol-worker deploy
pnpm --filter posthog-proxy-worker deploy- Build System: Vite for fast builds and development
- Package Manager: pnpm with workspace support
- Code Formatting: oxfmt for formatting and oxlint for linting
- Type Checking: TypeScript with shared configurations
- Edge Computing: Cloudflare Workers for serverless functions
- CI/CD: GitHub Actions with optimized workflows
- Change Management: Changesets for version management
This project uses oxlint for linting and oxfmt for formatting. Style settings: 2-space indentation, 80-character line width, and single quotes.
# Check formatting and linting
pnpm lint
# Auto-fix formatting and linting issues
pnpm lint:fix
# Format only
pnpm format
# Check formatting only
pnpm format:checkPre-commit hooks automatically lint and format staged files.
# Run all tests
pnpm test
# Run tests for a specific package
pnpm --filter @codaco/protocol-validation test
# Run tests in watch mode
pnpm test:watch
# Type check all packages
pnpm typecheckThis project uses Changesets for version management and automated releases.
# Add a changeset for your changes
pnpm changesetAfter merging a PR with changesets, a release PR will be created that bumps package versions. Merge that PR to publish the updated packages.
@codaco/interface-images ships generated screenshots of every interview interface (Sociogram, Name Generator, …), rendered from dedicated Storybook "capture" stories in @codaco/interview with Playwright + sharp. They are consumed by architect (stage thumbnails) and the documentation site (the hero image on each interface-documentation page).
The generated WebP variants in
packages/interface-images/src/generated/assets/ and their
packages/interface-images/src/generated/manifest.ts are committed. Architect,
the documentation site, CI, and Netlify consume those committed files; CI and
Netlify do not regenerate them.
Chromatic snapshots the Interview capture stories. Treat a relevant Chromatic diff as the review signal that the committed interface images may need to be refreshed, then regenerate them locally:
pnpm generate:interface-imagesThis builds the Interview Storybook and captures the images. It requires a
Chromium browser (pnpm exec playwright install chromium) and, for the
Geospatial map, STORYBOOK_MAPBOX_TOKEN. Review the results and commit
packages/interface-images/src/generated/assets/ and
packages/interface-images/src/generated/manifest.ts together. See
packages/interface-images for details.
These interface screenshots are separate from the committed Playwright PNG
baselines. For intentional Architect or Interview E2E pixel changes, use
the regenerating-e2e-visual-snapshots skill and the manual
Regenerate E2E Visual Snapshots GitHub Actions workflow.
- Fork the repository
- Create a feature branch
- Make your changes
- Add tests if applicable
- Run
pnpm lint:fixandpnpm typecheck - Submit a pull request
Built by the Complex Data Collective team