Overview

Design

Frontend

Fullstack

Create Website

Why Use fastn for Your Next Frontend?

record

or-type

list

ftd.row

Container Root Attributes

import

Using export/exposing

Functions

Built-in Functions

Built-in Rive Functions

Built-in Variables

ftd Events

Rive Events

Use color scheme package

assets

How to make page responsive

Using JS

JS in function

Web Component

Create fastn package

Same argument & attribute types

`ftd.code`

ftd.code is a component used to render the code component in an ftd document.

Sample Usage

Input

-- ftd.code:
lang: py

print("hello world")

-- ftd.code:
lang: py

print("hello world")

Lang:

ftd

Output

print("hello world")

Attributes

The ftd.code component accepts the below attributes along with the common attributes.

`text: caption or body`

This is the text or code to show. It accepts the value both in caption or body besides in header.

Sample code using text

Input

-- ftd.code:
lang: py
text: print("hello world")

-- ftd.code:
lang: py
text: print("hello world")

Lang:

ftd

Output

print("hello world")

`lang: optional string`

The lang property defines the language of the code. It is an optional field. In case if the value is not provided, this will take txt as default value.

Sample code using lang

Input

-- ftd.code:
lang: py

value = "hello world"
print(value)

-- ftd.code:
lang: py

value = "hello world"
print(value)

Lang:

ftd

Output

value = "hello world"
print(value)

`theme: optional string`

The theme property defines the theme for the code block. It is an optional field with default value base16-ocean.dark.

The available themes are:

fastn Themes

fastn-theme-dark
fastn-theme-light
fastn-theme-1-dark
fastn-theme-1-light

Note: Use your desired background color based on your theme when using any fastn code themes since these fastn themes doesn’t define any background color by itself.

Sample code using fastn-theme.dark theme

Input

-- ftd.code:
lang: py
theme: fastn-theme.dark
background.solid: black

value = "hello world"
print(value)

-- ftd.code:
lang: py
theme: fastn-theme.dark
background.solid: black

value = "hello world"
print(value)

Lang:

ftd

Output

value = "hello world"
print(value)

Sample code using fastn-theme.light theme

Input

-- ftd.code:
lang: py
theme: fastn-theme.light
background.solid: white

value = "hello world"
print(value)

-- ftd.code:
lang: py
theme: fastn-theme.light
background.solid: white

value = "hello world"
print(value)

Lang:

ftd

Output

value = "hello world"
print(value)

Sample code using fastn-theme-1.dark theme

Input

-- ftd.code:
lang: py
theme: fastn-theme-1.dark
background.solid: black

value = "hello world"
print(value)

-- ftd.code:
lang: py
theme: fastn-theme-1.dark
background.solid: black

value = "hello world"
print(value)

Lang:

ftd

Output

value = "hello world"
print(value)

Sample code using fastn-theme-1.light theme

Input

-- ftd.code:
lang: py
theme: fastn-theme-1.light
background.solid: white

value = "hello world"
print(value)

-- ftd.code:
lang: py
theme: fastn-theme-1.light
background.solid: white

value = "hello world"
print(value)

Lang:

ftd

Output

value = "hello world"
print(value)

Other Themes

base16-ocean.dark
base16-ocean.light
base16-eighties.dark
base16-mocha.dark
InspiredGitHub
Solarized (dark)
Solarized (light)

Refer this for the list of themes available

Sample code using base16-ocean.dark theme

Input

-- ftd.code:
lang: py
theme: base16-ocean.dark

value = "hello world"
print(value)

-- ftd.code:
lang: py
theme: base16-ocean.dark

value = "hello world"
print(value)

Lang:

ftd

Output

value = "hello world"
print(value)

Sample code using base16-ocean.light theme

Input

-- ftd.code:
lang: py
theme: base16-ocean.light

value = "hello world"
print(value)

-- ftd.code:
lang: py
theme: base16-ocean.light

value = "hello world"
print(value)

Lang:

ftd

Output

value = "hello world"
print(value)

Sample code using base16-eighties.dark theme

Input

-- ftd.code:
lang: py
theme: base16-eighties.dark

value = "hello world"
print(value)

-- ftd.code:
lang: py
theme: base16-eighties.dark

value = "hello world"
print(value)

Lang:

ftd

Output

value = "hello world"
print(value)

Sample code using base16-mocha.dark theme

Input

-- ftd.code:
lang: py
theme: base16-mocha.dark

value = "hello world"
print(value)

-- ftd.code:
lang: py
theme: base16-mocha.dark

value = "hello world"
print(value)

Lang:

ftd

Output

value = "hello world"
print(value)

Sample code using InspiredGitHub theme

Input

-- ftd.code:
lang: py
theme: InspiredGitHub

value = "hello world"
print(value)

-- ftd.code:
lang: py
theme: InspiredGitHub

value = "hello world"
print(value)

Lang:

ftd

Output

value = "hello world"
print(value)

Sample code using Solarized (dark) theme

Input

-- ftd.code:
lang: py
theme: Solarized (dark)

value = "hello world"
print(value)

-- ftd.code:
lang: py
theme: Solarized (dark)

value = "hello world"
print(value)

Lang:

ftd

Output

value = "hello world"
print(value)

Sample code using Solarized (light) theme

Input

-- ftd.code:
lang: py
theme: Solarized (light)

value = "hello world"
print(value)

-- ftd.code:
lang: py
theme: Solarized (light)

value = "hello world"
print(value)

Lang:

ftd

Output

value = "hello world"
print(value)

`text-align: optional ftd.text-align`

This property is used to align the text within ftd.code. It accepts the ftd.text-align type value and is optional.

center
start
right
justify

`center`

The inline contents are centered within the line box.

Sample code using text-align: center

Input

-- ftd.code:
lang: py
width.fixed.px: 400
text-align: center

value = "hello world"
print(value)

-- ftd.code:
lang: py
width.fixed.px: 400
text-align: center

value = "hello world"
print(value)

Lang:

ftd

Output

value = "hello world"
print(value)

`start`

The inline contents are aligned to the left edge of the line box.

Sample code using text-align: start

Input

-- ftd.code:
lang: py
width.fixed.px: 400
text-align: start

value = "hello world"
print(value)

-- ftd.code:
lang: py
width.fixed.px: 400
text-align: start

value = "hello world"
print(value)

Lang:

ftd

Output

value = "hello world"
print(value)

`end`

The inline contents are aligned to the right edge of the line box.

Sample code using text-align: end

Input

-- ftd.code:
lang: py
width.fixed.px: 400
text-align: end

value = "hello world"
print(value)

-- ftd.code:
lang: py
width.fixed.px: 400
text-align: end

value = "hello world"
print(value)

Lang:

ftd

Output

value = "hello world"
print(value)

`justify`

The inline contents are justified. Text should be spaced to line up its left and right edges to the left and right edges of the line box, except for the last line.

Sample code using text-align: justify

Input

-- ftd.code:
lang: py
width.fixed.px: 400
text-align: justify

value = "hello world"
print(value)

-- ftd.code:
lang: py
width.fixed.px: 400
text-align: justify

value = "hello world"
print(value)

Lang:

ftd

Output

value = "hello world"
print(value)

Support `fastn`!

Enjoying fastn? Please consider giving us a star ⭐️ on GitHub to show your support!

⭐️

Getting Help

Have a question or need help?

Visit our GitHub Q&A discussion to get answers and subscribe to it to stay tuned.

Join our Discord channel and share your thoughts, suggestion, question etc.

Connect with our community!

💻️

Found an issue?

If you find some issue, please visit our GitHub issues to tell us about it.

Quick links:

Join us

We welcome you to join our Discord 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.

Docs

ftd.code

`ftd.code`

ftd.code is a component used to render the code component in an ftd document.

Sample Usage

Input

-- ftd.code:
lang: py

print("hello world")

-- ftd.code:
lang: py

print("hello world")

Lang:

ftd

Output

print("hello world")

Attributes

The ftd.code component accepts the below attributes along with the common attributes.

`text: caption or body`

This is the text or code to show. It accepts the value both in caption or body besides in header.

Sample code using text

Input

-- ftd.code:
lang: py
text: print("hello world")

-- ftd.code:
lang: py
text: print("hello world")

Lang:

ftd

Output

print("hello world")

`lang: optional string`

The lang property defines the language of the code. It is an optional field. In case if the value is not provided, this will take txt as default value.

Sample code using lang

Input

-- ftd.code:
lang: py

value = "hello world"
print(value)

-- ftd.code:
lang: py

value = "hello world"
print(value)

Lang:

ftd

Output

value = "hello world"
print(value)

`theme: optional string`

The theme property defines the theme for the code block. It is an optional field with default value base16-ocean.dark.

The available themes are:

fastn Themes

fastn-theme-dark
fastn-theme-light
fastn-theme-1-dark
fastn-theme-1-light

Note: Use your desired background color based on your theme when using any fastn code themes since these fastn themes doesn’t define any background color by itself.

Sample code using fastn-theme.dark theme

Input

-- ftd.code:
lang: py
theme: fastn-theme.dark
background.solid: black

value = "hello world"
print(value)

-- ftd.code:
lang: py
theme: fastn-theme.dark
background.solid: black

value = "hello world"
print(value)

Lang:

ftd

Output

value = "hello world"
print(value)

Sample code using fastn-theme.light theme

Input

-- ftd.code:
lang: py
theme: fastn-theme.light
background.solid: white

value = "hello world"
print(value)

-- ftd.code:
lang: py
theme: fastn-theme.light
background.solid: white

value = "hello world"
print(value)

Lang:

ftd

Output

value = "hello world"
print(value)

Sample code using fastn-theme-1.dark theme

Input

-- ftd.code:
lang: py
theme: fastn-theme-1.dark
background.solid: black

value = "hello world"
print(value)

-- ftd.code:
lang: py
theme: fastn-theme-1.dark
background.solid: black

value = "hello world"
print(value)

Lang:

ftd

Output

value = "hello world"
print(value)

Sample code using fastn-theme-1.light theme

Input

-- ftd.code:
lang: py
theme: fastn-theme-1.light
background.solid: white

value = "hello world"
print(value)

-- ftd.code:
lang: py
theme: fastn-theme-1.light
background.solid: white

value = "hello world"
print(value)

Lang:

ftd

Output

value = "hello world"
print(value)

Other Themes

base16-ocean.dark
base16-ocean.light
base16-eighties.dark
base16-mocha.dark
InspiredGitHub
Solarized (dark)
Solarized (light)

Refer this for the list of themes available

Sample code using base16-ocean.dark theme

Input

-- ftd.code:
lang: py
theme: base16-ocean.dark

value = "hello world"
print(value)

-- ftd.code:
lang: py
theme: base16-ocean.dark

value = "hello world"
print(value)

Lang:

ftd

Output

value = "hello world"
print(value)

Sample code using base16-ocean.light theme

Input

-- ftd.code:
lang: py
theme: base16-ocean.light

value = "hello world"
print(value)

-- ftd.code:
lang: py
theme: base16-ocean.light

value = "hello world"
print(value)

Lang:

ftd

Output

value = "hello world"
print(value)

Sample code using base16-eighties.dark theme

Input

-- ftd.code:
lang: py
theme: base16-eighties.dark

value = "hello world"
print(value)

-- ftd.code:
lang: py
theme: base16-eighties.dark

value = "hello world"
print(value)

Lang:

ftd

Output

value = "hello world"
print(value)

Sample code using base16-mocha.dark theme

Input

-- ftd.code:
lang: py
theme: base16-mocha.dark

value = "hello world"
print(value)

-- ftd.code:
lang: py
theme: base16-mocha.dark

value = "hello world"
print(value)

Lang:

ftd

Output

value = "hello world"
print(value)

Sample code using InspiredGitHub theme

Input

-- ftd.code:
lang: py
theme: InspiredGitHub

value = "hello world"
print(value)

-- ftd.code:
lang: py
theme: InspiredGitHub

value = "hello world"
print(value)

Lang:

ftd

Output

value = "hello world"
print(value)

Sample code using Solarized (dark) theme

Input

-- ftd.code:
lang: py
theme: Solarized (dark)

value = "hello world"
print(value)

-- ftd.code:
lang: py
theme: Solarized (dark)

value = "hello world"
print(value)

Lang:

ftd

Output

value = "hello world"
print(value)

Sample code using Solarized (light) theme

Input

-- ftd.code:
lang: py
theme: Solarized (light)

value = "hello world"
print(value)

-- ftd.code:
lang: py
theme: Solarized (light)

value = "hello world"
print(value)

Lang:

ftd

Output

value = "hello world"
print(value)

`text-align: optional ftd.text-align`

This property is used to align the text within ftd.code. It accepts the ftd.text-align type value and is optional.

center
start
right
justify

`center`

The inline contents are centered within the line box.

Sample code using text-align: center

Input

-- ftd.code:
lang: py
width.fixed.px: 400
text-align: center

value = "hello world"
print(value)

-- ftd.code:
lang: py
width.fixed.px: 400
text-align: center

value = "hello world"
print(value)

Lang:

ftd

Output

value = "hello world"
print(value)

`start`

The inline contents are aligned to the left edge of the line box.

Sample code using text-align: start

Input

-- ftd.code:
lang: py
width.fixed.px: 400
text-align: start

value = "hello world"
print(value)

-- ftd.code:
lang: py
width.fixed.px: 400
text-align: start

value = "hello world"
print(value)

Lang:

ftd

Output

value = "hello world"
print(value)

`end`

The inline contents are aligned to the right edge of the line box.

Sample code using text-align: end

Input

-- ftd.code:
lang: py
width.fixed.px: 400
text-align: end

value = "hello world"
print(value)

-- ftd.code:
lang: py
width.fixed.px: 400
text-align: end

value = "hello world"
print(value)

Lang:

ftd

Output

value = "hello world"
print(value)

`justify`

The inline contents are justified. Text should be spaced to line up its left and right edges to the left and right edges of the line box, except for the last line.

Sample code using text-align: justify

Input

-- ftd.code:
lang: py
width.fixed.px: 400
text-align: justify

value = "hello world"
print(value)

-- ftd.code:
lang: py
width.fixed.px: 400
text-align: justify

value = "hello world"
print(value)

Lang:

ftd

Output

value = "hello world"
print(value)

Support `fastn`!

Enjoying fastn? Please consider giving us a star ⭐️ on GitHub to show your support!

⭐️

Getting Help

Have a question or need help?

Visit our GitHub Q&A discussion to get answers and subscribe to it to stay tuned.

Join our Discord channel and share your thoughts, suggestion, question etc.

Connect with our community!

💻️

Found an issue?

If you find some issue, please visit our GitHub issues to tell us about it.

Quick links:

Join us

We welcome you to join our Discord 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.

ftd.code

Attributes

text: caption or body

lang: optional string

theme: optional string

text-align: optional ftd.text-align

center

start

end

justify

Support fastn!

Getting Help

Found an issue?

Quick links:

Join us

ftd.code

Attributes

text: caption or body

lang: optional string

theme: optional string

text-align: optional ftd.text-align

center

start

end

justify

Support fastn!

Getting Help

Found an issue?

Quick links:

Join us

`ftd.code`

`text: caption or body`

`lang: optional string`

`theme: optional string`

`text-align: optional ftd.text-align`

`center`

`start`

`end`

`justify`

Support `fastn`!

`ftd.code`

`text: caption or body`

`lang: optional string`

`theme: optional string`

`text-align: optional ftd.text-align`

`center`

`start`

`end`

`justify`

Support `fastn`!