Support us by giving us a

Overview

Design

Why Use `fastn` for Your Next Frontend?

`ftd.rive` (animation)

Container Root Attributes

`import`

Using export/exposing

Functions

Built-in Functions

Built-in Rive Functions

Built-in Local Storage Functions

Built-in Variables

`ftd` Events

Rive Events

Use color scheme package

How to make page responsive

Using JS

JS in function

Web Component

Create `fastn` package

Same argument & attribute types

Kernel Components

`fastn` comes with a few `kernel` components, these components are the building blocks for building all other components.

ℹ️

import

`fastn` supports `import`ing one document from another, and the imported documents act as a namespace.

All `kernel` components are defined in a `virtual document`, named `ftd`, and every `.ftd` file implicitly imports ftd:

hello world using `ftd.text`

-- import: ftd

-- ftd.text: hello world

Lang:

ftd

The `import` line is not needed as it's automatically imported. This line defines namespace `ftd`, so all `kernel` components are referred as `ftd.text` and so on. We are then using a component named [`ftd.text`](ftd/text/) to render the text "hello world" in the UI.

List of `kernel` components

- [`ftd.column`](ftd/column/) - [`ftd.row`](ftd/row/) - [`ftd.text`](ftd/text/) - [`ftd.image`](ftd/image/) - [`ftd.iframe`](ftd/iframe/) - [`ftd.integer`](ftd/integer/) - [`ftd.decimal`](ftd/decimal/) - [`ftd.boolean`](ftd/boolean/) - [`ftd.code`](ftd/code/)

Support `fastn`!

Enjoying `fastn`? Please consider giving us a star ⭐️ on [GitHub](https://github.com/fastn-stack/fastn) to show your support!

[⭐️](https://github.com/fastn-stack/fastn)

Getting Help

Have a question or need help? Visit our [GitHub Q&A discussion](https://github.com/fastn-stack/fastn/discussions/categories/q-a) to get answers and subscribe to it to stay tuned. Join our [Discord](https://discord.gg/a7eBUeutWD) channel and share your thoughts, suggestion, question etc. Connect with our [community](/community/)!

[💻️](/community/)

Found an issue?

If you find some issue, please visit our [GitHub issues](https://github.com/fastn-stack/fastn/issues) to tell us about it.

Quick links:

- [Install `fastn`](install/) - [Create `fastn` package](create-fastn-package/) - [Expander Crash Course](expander/) - [Syntax Highlighting in Sublime Text](/sublime/)

Join us

We welcome you to join our [Discord](https://discord.gg/a7eBUeutWD) community today. 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.