`fastn` Programming Language
`fastn` is designed for everyone, not just programmers.
[Getting Started](/setup/) | [Watch Course](/expander/)
[Star us on Github](https://github.com/fastn-stack/ftd)
`fastn` for authoring prose
`fastn` is a DSL for authoring long for text, and have access to
rich collection of ready made components.
writing single or multi line text is easy
-- amitu: Hello World! 😀
-- ds.markdown:
some markdown text!
-- amitu:
you can also write multiline messages easily!
no quotes. and **markdown** is *supported*.
Lang:
ftd
Hello World! 😀
some markdown text!
you can also write multiline messages easily!
no quotes. and **markdown** is *supported*.
Note: These are not built in components of `fastn`, but are using
[open source component libraries](/featured/), eg
[fastn-community.github.io/bling/quote](https://fastn-community.github.io/bling/chat/).
Learn how to [build your own](/expander/).
using little more complex components
-- import: fastn-community.github.io/bling/quote
-- quote.charcoal: Amit Upadhyay
label: Creator of `fastn`
avatar: $fastn-assets.files.images.amitu.jpg
logo: $fastn-assets.files.images.logo-fifthtry.svg
The web has lost some of the exuberance from the
early 2000s, and it makes me a little sad.
Lang:
ftd
The web has lost some of the exuberance from the
early 2000s, and it makes me a little sad.
Amit Upadhyay
Creator of `fastn`
There are
[many components to chose from](https://fastn-community.github.io/bling/quote/),
and you can create your own with ease.
A language for building UI
`fastn` comes with basic building blocks like text, images and containers using
with other UI can be constructed.
Creating a custom component
-- component toggle-text:
boolean $current: false
caption title:
-- ftd.text: $toggle-text.title
align-self: center
color if { toggle-text.current }: $inherited.colors.cta-primary.disabled
color: $inherited.colors.cta-primary.text
role: $inherited.types.heading-tiny
background.solid: $inherited.colors.cta-primary.base
padding.px: 20
border-radius.px: 5
$on-click$: $ftd.toggle($a = $toggle-text.current)
-- end: toggle-text
-- toggle-text: `fastn` is cool!
Lang:
ftd
Output
`fastn` is cool!
With `fastn`, you can express your ideas and bring them to a compilation with
ease.
Take a look at this simple `fastn` document:
`fastn` Hello World!
-- ftd.text: Hello World!
Lang:
ftd
The above code would show `Hello World` as output.
With just a few lines of code, you can create a visually appealing and impactful
document. It is a language that is easy to read and understand. It is not
verbose like HTML, and not simplistic like Markdown.
`fastn` can be compared with Markdown, but with `fastn`, you can define
variables, perform event handling, abstract out logic into custom components
etc.
How to use `fastn`?
`fastn` can be used using [`fastn`](/) which provides interface for `fastn`.
You need to install fastn to get started.
Here are some of the important `fastn` related links.
- [Introducing `fastn`](/)
- [Install `fastn`](/install/)
Declaring Variable
In `fastn`, you can create variables with specific types. `fastn` is a
strongly-typed language, so the type of each variable must be declared.
Here's an example of how you can define a boolean type variable:
Defining Variable
-- boolean flag: true
Lang:
ftd
In this code, we're creating a variable named `flag` of `boolean` type. The
variable is defined as immutable, meaning its value cannot be altered. If you
want to define a mutable variable, simply add a `$` symbol before the variable
name.
Consider this example which has a mutable variable declaration `flag`.
Defining Variable
-- boolean $flag: true
Lang:
ftd
To know more about variables checkout [variables](/variables/).
Event handling
`fastn` makes it easy to add events to your element. Let's take a look at the
following example:
`ftd.text` kernel component
-- boolean $current: true
-- ftd.text: Hello World!
align-self: center
text-align: center
padding.px: 20
color if { current }: #D42D42
color: $inherited.colors.cta-primary.text
background.solid: $inherited.colors.cta-primary.base
$on-click$: $ftd.toggle($a = $current)
Lang:
ftd
Hello World!
Since the target audience for `fastn` is human beings, it includes many "default
functions" that are commonly used, like the `toggle` function which can be used
to create simple event handling.
Creating a custom component
In `fastn`, you can create custom components to abstract out logic and improve
code organization. For example:
Creating a custom component
-- component toggle-text:
boolean $current: false
caption title:
-- ftd.text: $toggle-text.title
align-self: center
color if { toggle-text.current }: $inherited.colors.cta-primary.disabled
color: $inherited.colors.cta-primary.text
role: $inherited.types.heading-tiny
background.solid: $inherited.colors.cta-primary.base
padding.px: 20
border-radius.px: 5
$on-click$: $ftd.toggle($a = $toggle-text.current)
-- end: toggle-text
-- toggle-text: `ftd` is cool!
Lang:
ftd
`ftd` is cool!
Here we have created a new component called `toggle-text`, and then instantiated
it instead. This way you can create custom component library and use them in our
writing without "polluting" the prose with noise.
Import
`fastn` allows you to separate component and variable definitions into different
modules, and then use them in any module by using the `import` keyword. This
helps to logically organize your code and avoid complexity, leading to cleaner
and easier to understand code.
Consider the below example:
`fastn` Hello World!
-- import: lib
-- lib.h1: Hello World
Lang:
ftd
The code above shows a `fastn` document that imports a library named "`lib`" and
has a level 1 heading of "Hello World".
Data Modelling
`fastn` language is also a good first class data language. You can define and use
records:
Data Modelling in `fastn`
-- record person:
caption name:
string location:
optional body bio:
Lang:
ftd
Each field has a type. `caption` is an alias for `string`, and tells `fastn`
that the value can come in the "caption" position, after the `:` of
the "section line", eg: lines that start with `--`. If a field is optional, it
must be marked as such.
Creating a variable
-- person amitu: Amit Upadhyay
location: Bangalore, India
Amit is the founder and CEO of FifthTry.
He loves to code, and is pursuing his childhood goal of
becoming a professional starer of the trees.
Lang:
ftd
Here we have defined a variable `amitu`. You can also define a list:
Creating a list
-- person list employees:
-- person: Sourabh Garg
location: Ranchi, India
-- person: Arpita Jaiswal
location: Lucknow, India
Arpita is the primary author of `fastn` language.
-- end: employees
Lang:
ftd
`fastn` provides a way to create a component that can render records and loop
through lists to display all members of the list:
Looping over a list
-- render-person:
person: $p
$loop$: $employees as $p
Lang:
ftd
This way we can have clean separation of data from presentation. The data
defined in `fastn` documents can be easily read from say Rust:
Reading Data from `.ftd` files
#[derive(serde::Deserialize)]
struct Employee {
name: String,
location: String,
bio: Option<String>
}
let doc = ftd::p2::Document::from("some/id", source, lib)?;
let amitu: Employee = doc.get("amitu")?;
let employees: Vec<Employee> = doc.get("employees")?;
Lang:
rs
As mentioned earlier, `fastn` language is a first-class data language that
provides a better alternative to sharing data through CSV or JSON files. Unlike
CSV/JSON, in `fastn`, data is type-checked, and it offers a proper presentation
of the data with the option to define components that can render the data,
which can be viewed in a browser.
Furthermore, `fastn` language can also serve as a language for configuration
purposes.
Getting Involved
We are trying to create the language for human beings and we do not believe it
would be possible without your support. We would love to hear from you.
Github: https://github.com/FifthTry/ftd
Discord: Join our [`fastn` channel](https://discord.gg/xN3uD8P7WA).
License: BSD
