[](https://github.com/fastn-stack/fastn/graphs/contributors)
[](https://github.com/fastn-stack/fastn/issues)
[](https://github.com/fastn-stack/fastn/blob/main/LICENSE)
[](https://fastn.com/discord/)
# `fastn` - Full-stack Web Development Made Easy
`fastn` is a programming language and a web-framework for building user
interfaces and content-centric websites. `fastn` is easy to learn, especially
for non-programmers, but does not compromise on what you can build with it.
Install from https://fastn.com/install/ or download directly from [GitHub
Releases](https://github.com/fastn-stack/fastn/releases).
## Features
## Minimal Syntax
A Hello World program in `fastn`:
```ftd
;; comments begin with `;;`
;; save this file as index.ftd
-- ftd.text: Hello World! 😀
```
You'll also need a `FASTN.ftd` file that stores information about your fastn
package:
```ftd
-- import: fastn
;; your package name
-- fastn.package: my-first-fastn-package
```
Save these two files and run `fastn serve` from the project dir. Visit the
printed URL and you'll see "Hello World! 😀" printed in your browser.
In addition to `ftd.text`, other kernel components exist that helps you create
UIs. You can learn about them at https://fastn.com/kernel/.
You can create custom components on top of these kernel components:
```ftd
;; Component Definition
-- component card:
;; these are the arguments along with their types. `caption` is just string
;; with a special position
caption title:
;; `ftd.image-src` is a record type that allows you to specify two image urls,
;; for dark and light mode.
ftd.image-src background:
;; `body` is a `string` type but gets a special position to help you write
;; multi-line texts.
body description:
;; component body begins after a newline
-- ftd.column:
-- ftd.image:
src: $card.background
-- ftd.text: $card.title
role: h2
-- ftd.text: $card.description
-- end: ftd.column
-- end: card
;; This is how you call the `card` component
-- card: Hello world! **markdown is supported!**
;; `$fastn-assets` is a special import. See: https://fastn.com/assets/
background: $fastn-assets.files.images.fastn.svg
A `body` is just a `string` type but gets a special position to help you
write multi-line texts. And markdown is supported so I can
[ask for donation!](https://fastn.com/donate/) ;)
```
If you had used `string` instead of `caption` and `body`, then you'd have to do:
```ftd
-- card:
title: Hello world! **markdown is supported!**
background: $fastn-assets.files.images.fastn.svg
-- card.body:
A `body` is just a `string` type but gets a special position to help you
write multi-line texts. And markdown is supported so I can
[ask for donation!](https://fastn.com/donate/) ;)
-- end: card
```
You can learn more about built in data types at https://fastn.com/built-in-types/.
A short **language tour** is available at https://fastn.com/geeks/.
## Routing
`fastn` support file-system based routing. For the following fs hierarchy:
```
├── ednet
│ ├── intro.ftd
│ └── xray.ftd
├── fastn
│ ├── index.ftd
├── FASTN.ftd
├── index.ftd
├── new.png
```
`/ednet/{intro, xray}`, `/fastn/`, `/` and `/new.png` URLs will be served by
`fastn serve` webserver automatically.
`fastn` also supports [dynamic-urls](https://fastn.com/dynamic-urls/),
[sitemap](https://fastn.com/understanding-sitemap/-/build/) and,
[url-mappings](https://fastn.com/redirects/-/backend/).
## Processors
processors are executed on the server side, and can be used to fetch data from
APIs, databases, or any other source. They are used to collect data before
rendering it on the client side.
```ftd
-- import: fastn/processors
-- record user:
string email:
string name:
-- user my-user:
$processor$: processors.http
url: https://jsonplaceholder.typicode.com/users/1
-- ftd.text: $my-user.email
```
See https://fastn.com/http/ to learn more about the `http` and other processors.
## `fastn` for Static Sites
`fastn` websites can be compiled into static html, css and, js and can be
deployed on any static hosting providers like [Github
Pages](https://fastn.com/github-pages/) and
[Vercel](https://fastn.com/vercel/).
## More Features
- Support for custom backends using WASM and [`ft-sdk`](https://github.com/fastn-stack/ft-sdk/).
- Support for custom css and js. See https://fastn.com/use-js-css/.
- First class support for for web-components. See https://fastn.com/web-component/.
- Easy to migrate from a static site generator like 11ty, Hugo, etc.
- Built-in package management system, opinionated [design
system](https://design-system.fifthtry.site/), dark mode support, designed for
[responsive UIs](https://fastn.com/making-responsive-pages/). Oh My!
## `fastn` 0.5
We're currently working on `fastn` 0.5. It will add support for making
offline-first p2p apps based on [iroh](https://github.com/n0-computer/iroh) and
[automerge](https://github.com/automerge/automerge) along with some breaking
changes to the language.
To learn more, see:
- [0.5 ARCHITECTURE.md](https://github.com/fastn-stack/fastn/blob/main/v0.5/ARCHITECTURE.md).
- [Video discussion on YouTube](https://www.youtube.com/watch?v=H9d1Dn8Jn0I).
- [Existing github discussions](https://github.com/orgs/fastn-stack/discussions?discussions_q=is%3Aopen+label%3A0.5-brainstorm).
## FifthTry Hosting
We, [FifthTry](https://www.fifthtry.com) also offer our own hosting solution for
your static and dynamic sites. Using FifthTry hosting frees you from devops
needs, and you get a fully integrated, managed hosting solution, that a
non-programmers can use with ease.
## Contributors
## License
This project is licensed under the terms of the **UPL-1.0**.
