Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Update README to talk about app builder #408

Merged
merged 3 commits into from
Oct 22, 2024
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
27 changes: 24 additions & 3 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -15,15 +15,36 @@
<a href="https://www.youtube.com/@srcbook">Youtube</a>
</p>

## Srcbook

Srcbook is a TypeScript-centric app development platform. It allows you to create and iterate on web apps incredibly fast using AI as a pair-programmer.
It can create or edit web apps, and also write and execute backend code through an interactive notebook interface.

Srcbook is open-source (apache2) and runs locally on your machine. You need to bring your own API key for AI usage (we strongly recommend Anthropic with `claude-3-5-sonnet-latest`).

## Features

- Create, run, and share reproducible programs and ideas
### App Builder

- AI app builder for TypeScript
- Create, edit and run web apps
- Use AI to generate the boilerplate, modify the code, and fix things
- Edit the app with a hot-reloading web preview

<picture>
<source media="(prefers-color-scheme: dark)" srcset="https://i.imgur.com/lLJPZOs.png">
<source media="(prefers-color-scheme: light)" srcset="https://i.imgur.com/k4xAyCQ.png">
<img alt="Example Srcbook" src="https://i.imgur.com/k4xAyCQ.png">
</picture>

### Notebooks

- Create, run, and share TypeScript notebooks
- Export to valid markdown format (.src.md)
- AI features for exploring and iterating on ideas
- Diagraming with [mermaid](https://mermaid.js.org) for rich annotations
- Local execution with a web interface
- Powered by Node.js
- Open-source under the Apache2 license

<picture>
<source media="(prefers-color-scheme: dark)" srcset="https://imagedelivery.net/oEu9i3VEvGGhcGGAYXSBLQ/2a4fa0f6-ef1b-4606-c9fa-b31d61b7c300/public">
Expand Down Expand Up @@ -73,7 +94,7 @@ Options:

Commands:
start [options] Start the Srcbook server
import [options] <specifier> Import a Srcbook
import [options] <specifier> Import a Notebook
help [command] display help for command
```

Expand Down
23 changes: 20 additions & 3 deletions srcbook/README.md
Original file line number Diff line number Diff line change
Expand Up @@ -11,17 +11,34 @@
<a href="https://www.youtube.com/@srcbook">Youtube</a>
</p>

## Srcbook

Srcbook is a TypeScript-centric app development platform. It allows you to create and iterate on web apps incredibly fast using AI as a pair-programmer.
It can create or edit web apps, and also write and execute backend code through an interactive notebook interface.

Srcbook is open-source (apache2) and runs locally on your machine. You need to bring your own API key for AI usage (we strongly recommend Anthropic with `claude-3-5-sonnet-latest`).

## Features

- Create, run, and share reproducible programs and ideas
### App Builder

- AI app builder for TypeScript
- Create, edit and run web apps
- Use AI to generate the boilerplate, modify the code, and fix things
- Edit the app with a hot-reloading web preview

![example app builder app light](https://i.imgur.com/k4xAyCQ.png)

### Notebooks

- Create, run, and share TypeScript notebooks
- Export to valid markdown format (.src.md)
- AI features for exploring and iterating on ideas
- Diagraming with [mermaid](https://mermaid.js.org) for rich annotations
- Local execution with a web interface
- Powered by Node.js
- Open-source under the Apache2 license

![Example Srcbook light](https://imagedelivery.net/oEu9i3VEvGGhcGGAYXSBLQ/ebfa2bfe-f805-4398-a348-0f48d4f93400/public)
Copy link
Contributor

@benjreinhart benjreinhart Oct 22, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

NPM doesn't have a darkmode so the lightmode is hardcoded. I don't think the <picture> element was supported on npm either (IIRC)

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thanks, updated

![example notebook light](https://imagedelivery.net/oEu9i3VEvGGhcGGAYXSBLQ/ebfa2bfe-f805-4398-a348-0f48d4f93400/public)

## FAQ

Expand Down