fastn
With fastn, you can express your ideas and bring them to a compilation with ease. Its user-friendly interface and minimal syntax allow even those with no prior programming experience to grasp its functionalities swiftly.
Take a look at this simple example:-- ftd.text: Hello World!
fastn is a DSL (Domain Specific Language) for authoring long for text, and have access to rich collection of ready-made components.
Here is an example:-- amitu: Hello World! 😀
-- amitu:
Writing single or multiline text is easy in fastn!
No quotes required.
Writing single or multiline text is easy in fastn!
No quotes required.These are not built-in components of fastn, but are using open source component libraries built with fastn. Click here to view the chat component.
Example of a little more complex component:-- import: fastn-community.github.io/bling/quote
-- quote.rustic: Nandhini, Content Writer
With fastn, I have complete control from my writing desk to the live webpage.
Click here to view the quote component.
Check out our rich library of readymade components including doc sites, landing pages, blog pages, resumes, and more.fastn excels in content authoring, making it an ideal choice for content-driven websites. Unlike other frameworks like React, which might require using separate languages like MDX for content, fastn allows you to use a simplified markdown-like language, making content creation straightforward.
Take the below example for instance:-- import: fastn-community.github.io/doc-site as ds
-- ds.markdown:
Lorem `ipsum dolor` sit amet, consectetur adipiscing elit, sed do eiusmod
tempor incididunt
**Bold Text** dolor sit amet, *Italic text* elit, sed do eiusmod tempor
incididunt.
Lorem ipsum [fastn](https://fastn.com/) amet, consectetur adipiscing
elit, sed do eiusmod tempor incididunt.
Bullet list:
- List item 1
- List item 2
- List item 3
- Sub List item 1
- Sub List item 2
- Sub List item 3
Ordered list:
1. List item
2. List item
3. List item
1. Sub List Item
2. Sub List Item
3. Sub List Item
~The world is flat.~
Lorem ipsum dolor
sit amet, consectetur adipiscing elit, sed do eiusmod
tempor incididunt
Bold Text dolor sit amet, Italic text elit, sed do eiusmod tempor incididunt.
Lorem ipsum fastn amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt.
Bullet list:
Ordered list:
With fastn, your content becomes more semantic. Instead of just headings and paragraphs, you work with named components that have rich types. This ensures better structure and maintainability of your content.
For example, if you want to talk about your team, in markdown you will say:# Team
## Jack Smith
Jack is our lead designer. He joined us on 20th Feb 2022. He loves to cook and
swim, and is often found walking his husky.

-- lib.team:
-- lib.member: Jack Smith
joined-on: 20th Feb 2022
title: Lead Designer
mugshot: $assets.files.team.jack.jpg
Jack loves to cook and swim, and is often found walking his husky.
-- end: lib.team
lib.member
component.fastn comes with integrated design system. Instead of specifying font sizes or colors, you specify typography and color roles to UI elements. The roles are well defined, so within the fastn ecosystem they are well known, and a lot of color scheme and typography packages available, which you can install and change the entire typography or color scheme in a few lines of code.
Learn more about fastn design system.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.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:-- boolean flag: true
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.
flag
.-- boolean $flag: true
fastn makes it easy to add events to your element.
fastn includes many default functions that are commonly used, like the
toggle
function which can be used to create simple event handling.
You can also create your own function or use built-in function.
Here's an example of a built-in function:-- boolean $show: true
-- ftd.text: Enter mouse cursor over me
$on-mouse-enter$: $ftd.set-bool($a = $show, v = true)
$on-mouse-leave$: $ftd.set-bool($a = $show, v = false)
-- ftd.text: Hide and Seek
if: { show }
ftd.text
kernel component-- toggle-text: fastn is cool!
-- 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
, and then instantiated
it instead. This way you can create custom component library and use them in your
writing without "polluting" the prose with noise.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.
fastn
Hello World!-- import: lib
-- lib.h1: Hello World
lib
" and
has a level 1 heading of "Hello World".#[derive(serde::Deserialize)]
struct Member {
name: String,
#[rename("joined-on")]
joined_on: String,
title: Option<String>,
mugshot: Option<String>,
bio: String,
}
let doc = fastn::Document::from("some/id", source)?;
let members: Vec<Member> = doc.invocations("lib.member")?;
fastn json-dump team.ftd --invocations=lib.member
will return:fastn json-dump
[
{
"name": "Jack Smith",
"joined-on": "20th Feb 2022",
"title": "Lead Designer",
"mugshot": "/team/jack.jpg",
"bio": "Jack loves to cook and swim, and is often found walking his husky."
}
]
fastn
-- record person:
caption name:
string location:
optional body bio:
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.-- 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.
amitu
. You can also define 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
-- render-person:
person: $p
$loop$: $employees as $p
.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")?;
Get Started with fastn: We provide a step-by-step guide to help you build your first fastn-powered website. You can also install fastn and learn to build UI Components using fastn.
Docs: Our docs is the go-to resource for mastering fastn. It provides valuable resources from in-depth explanations to best practices.
Backend: fastn also supports a bunch of backend features that helps you create dynamic websites.