A token-minimal programming language for full-stack web applications. Write web apps in 80% fewer tokens.
C-slop is designed for machine efficiency - minimizing tokens while maintaining expressiveness. It provides:
- Backend: Express.js API routes with database operations
- Frontend: Reactive UI components with signals
- Routing: Client-side SPA navigation
# Install
cd compiler && npm install && npm link
# Create a new project
cslop create my-app
cd my-app
# Start dev server with hot reload
cslop watchVisit http://localhost:3000
This repository includes an OpenCode skill for C-slop located at .opencode/skills/c-slop/SKILL.md. This skill helps AI assistants (like OpenCode, Claude, etc.) understand C-slop's syntax and provide better assistance.
The skill is a quick reference guide containing:
- Symbol glossary (
@,$,#,>, etc.) - Backend syntax for
.slopfiles - Frontend syntax for
.uifiles - Common patterns and examples
- Command reference
Automatic: The skill is automatically installed when you create a new project:
cslop create my-app
# Creates .claude/skills/c-slop/SKILL.md automaticallyManual (for existing projects or global install):
# Project-local
cp -r .opencode/skills/c-slop /path/to/your/project/.claude/skills/
# Global (OpenCode)
cp -r .opencode/skills/c-slop ~/.config/opencode/skills/
# Global (Claude Code)
cp -r .opencode/skills/c-slop ~/.claude/skills/The skill provides AI assistants with context about C-slop, enabling them to:
- Understand the symbol-based syntax
- Write correct
.slopand.uifiles - Suggest appropriate patterns
- Explain error messages
For complete documentation, see the skill file or read C-SLOP.md and USAGE.md.
my-app/
├── slop.json # Configuration
├── api.slop # Backend API routes
├── router.slop # Frontend routing
├── components/ # UI components
│ ├── Home.ui
│ └── Counter.ui
└── dist/ # Compiled output
# REST API in a few lines
*/ > #json({message: "Hello!"})
*/users > @users > #json
*/users/:id > @users[$.id] > #json
*/users + @users!$.body > #json
*/users/:id - @users[$.id]!- > #204
| Symbol | Meaning | Example |
|---|---|---|
* |
Route | */api/users |
+ |
POST | */users + |
^ |
PUT | */users/:id ^ |
- |
DELETE | */users/:id - |
@ |
Database | @users |
$ |
Request | $.body, $.id |
# |
Response | #json, #201 |
> |
Pipeline | @users > #json |
# Counter.ui - Reactive component
$count:0
<?
.counter
h1["Count: @{$count}"]
button["+" @click($count++)]
button["-" @click($count--)]
$count:0 # Reactive state
$doubled := $count * 2 # Computed value
~ fetch("/api") > $data # Effect (runs on mount)
button["Click" @click($count++)] # Increment
button["Save" @click(handleSave)] # Call function
input[@input($text:e.target.value)] # Input handler
form[@submit(handleSubmit)] # Form submit
img[src{$imageUrl} alt{"Avatar"}] # Dynamic src, static alt
a[href{$link} target{"_blank"}] # Mixed attributes
div[class{$activeClass}] # Dynamic class
@@Counter # Use component (auto-imports)
@@UserList
# Client-side SPA routing
/ > @@Home
/counter > @@Counter
/users/:id > @@UserDetail
# @nav sets href and click handler automatically
a["Go to Counter" @nav(/counter)]
button["Back" @nav(/)]
cslop create <name> # Create new project
cslop watch # Dev server + hot reload
cslop start # Production server
cslop <file.slop> # Run a .slop file
cslop build <file> # Compile to JSSlopUI is a built-in CSS library included automatically in all projects.
Dark/light mode with localStorage persistence:
button["Toggle Theme" @click(toggleTheme)]
Configure colors in slop.json:
{
"theme": {
"light": { "primary": "#3b82f6", "success": "#22c55e" },
"dark": { "primary": "#60a5fa", "success": "#4ade80" }
}
}# Buttons
button.btn.btn-primary["Primary"]
button.btn.btn-secondary["Secondary"]
button.btn.btn-success["Success"]
button.btn.btn-ghost["Ghost"]
button.btn.btn-outline["Outline"]
# Cards
.card
h3.card-title["Title"]
.card-body
p["Content"]
# Inputs
input.input["Placeholder"]
textarea.textarea["Message"]
# Alerts
.alert.alert-info["Info message"]
.alert.alert-success["Success!"]
.alert.alert-error["Error!"]
# Badges
span.badge.badge-primary["New"]
# Flexbox
.flex .flex-col .items-center .justify-center .justify-between
.gap-2 .gap-4 .gap-6
# Spacing
.p-4 .px-4 .py-4 .m-4 .mt-4 .mx-auto
# Text
.text-center .text-primary .text-secondary .font-bold
# Containers
.container .container-sm .container-md
{
"name": "my-app",
"database": {
"type": "memory"
},
"server": {
"port": 3000,
"static": "./dist"
},
"theme": {
"light": {
"primary": "#3b82f6",
"success": "#22c55e",
"warning": "#f59e0b",
"error": "#ef4444"
},
"dark": {
"primary": "#60a5fa",
"success": "#4ade80",
"warning": "#fbbf24",
"error": "#f87171"
}
}
}Database types: memory, sqlite
compiler/
├── src/
│ ├── cli.js # CLI commands
│ ├── compiler.js # Backend parser
│ └── runtime.js # Express wrapper
├── frontend/
│ ├── parser.js # .ui parser
│ ├── codegen.js # JS generator
│ ├── router-parser.js
│ └── router-codegen.js
├── runtime/
│ ├── signals.js # Reactive signals (~1.5KB)
│ ├── dom.js # DOM helpers (~1KB)
│ └── router.js # Client-side router
└── slopui/
├── base.css # CSS reset & utilities
├── components.css # Component styles
└── theme.js # Theme generator
MIT