Serverless By Design is a visual approach to serverless development:
- An application is a network of nodes (serverless resources, such as Lambda functions or S3 buckets) connected by edges (their relationships, for example a trigger or a data flow)
- Edit an application adding nodes and edges following an event-driven design
- Import a previously exported application to continue working on it
- Choose a runtime, and build your application (for example, using AWS SAM)
- Optionally use canary or linear deployments for your future updates
- Edit templates and code files for the final configurations before deploying the application
- Export an application to save it for later use in a JSON file
- Take a picture of the application architecture to have a visual representation to share
- Fine tune the physics used to place nodes and edges on the screen, for example enable/disable it or choose another solver
Serverless By Design runs in the browser and doesn't need an internet connection when installed locally.
Think. Build. Repeat.
| Resource | Key |
|---|---|
| API Gateway | api |
| Cognito Identity Pool | cognitoIdentity |
| DynamoDB Table | table |
| EventBridge Bus | eventBus |
| IoT Topic Rule | iotRule |
| Kinesis Data Analytics | analyticsStream |
| Kinesis Data Firehose | deliveryStream |
| Kinesis Data Stream | stream |
| Lambda Function | fn |
| S3 Bucket | bucket |
| Schedule (CloudWatch) | schedule |
| SNS Topic | topic |
| SQS Queue | queue |
| Step Functions | stepFn |
- AWS SAM — generates
template.yamlwith SAM intrinsic functions - Serverless Framework — generates
serverless.ymlwith JSON-form CloudFormation syntax
- Node.js 22.x / 20.x
- Python 3.13 / 3.12
Copyright (c) 2017-2026 Danilo Poccia, http://danilop.net
This code is licensed under the The MIT License (MIT). Please see the LICENSE file that accompanies this project for the terms of use.
You need node (v18+) and npm. Install dependencies and build:
npm install
npm run build
Then preview the production build:
npm run preview
For development with hot module replacement:
npm run dev
The codebase is written in TypeScript with strict mode enabled.
Lint (ESLint with typescript-eslint):
npm run lint
npm run lint:fix
Type check:
npm run typecheck
A pre-commit hook (husky + lint-staged) runs ESLint and type checking automatically on staged files.
Here are a few examples to help you start:
- Bootstrap 5
- Vis.js Network
- Font Awesome 6
- js-yaml
- FileSaver.js
- JSZip
- Vite (build tool)
- TypeScript (type system)
- ESLint + typescript-eslint (linting)