Learn full-stack web development using fastn in a week

Compare

fastn vs React

fastn vs React, Angular and Javascript

fastn is a no-fuss alternative to the complexities of React, Angular, and JavaScript. Here is a quick glance.

Very Easy Syntax

fastn simplifies programming making it accessible to everyone. Developers, designers, and non-programmers alike can easily learn fastn to build stunning web projects.

Its user-friendly interface and minimal syntax allow even those with no prior programming experience to grasp its functionalities swiftly.

Take the below examples for instance.

Example 1

Input

-- chat-female-avatar: Hello World! 😀

-- chat-female-avatar:

I'm Nandhini, a freelance content writer.

-- chat-female-avatar:

Fun fact: I also built this entire page with fastn! 🚀
It's that easy!

Lang:

ftd

Output

Hello World! 😀

I'm Nandhini, a freelance content writer.

Fun fact: I built this entire page with fastn! 🚀

It's that easy!

Example 2

Input

-- quote.rustic: Nandhini

It's liberating to control the outcome as the creator. I can swiftly bring
changes to life without delay or intermediaries.

Lang:

ftd

Output

It's liberating to control the outcome as the creator. I can swiftly bring changes to life without delay or intermediaries.

Nandhini

Example 3

Input

-- boolean $show-modal: false

-- modal-cover.button: Click to Open
$on-click$: $ftd.toggle($a = $show-modal)
disable-link: true

-- modal-cover.modal-cover: fastn fun-fact
$open: $show-modal

**`If you can type, you can code!`**

Lang:

ftd

Output

Click to Open

As evident, the language is effortlessly comprehensible to everyone. This fosters smooth collaboration among developers, designers, and content creators, ultimately boosting the efficiency of the entire project.

Rich collection of ready-made components

fastn's versatility accommodates a wide range of projects, from landing pages to complex web applications, giving startups the agility they need to adapt and evolve.

You can choose from numerous components that suit your needs. There are doc-sites, blogs, landing pages to individual component library like bling, hero sections, and more.

The best part? All components in the ecosystem adhere to a unified design system. This ensures that every component blends seamlessly with others, creating a cohesive look and feel across your entire site.

Create your own custom component

From buttons that seamlessly blend with your design to interactive elements that engage users, fastn makes component creation intuitive and efficient.

Creating a custom 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

Lang:

ftd

Output

fastn is cool!

Content Components

In fastn, you can create custom content components for recurring information. This ensures a consistent user experience throughout your website while saving your time.

Functional Components

fastn's dynamic features lets you create engaging user experiences that capture and retain customer interest.

Event Handling Made Simple

We've got a range of built-in events in fastn. Handle clicks, mouse actions, and more. fastn’s event handling capabilities can be used to create fully functional frontend applications.

Input

-- boolean $show: false

-- 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 }

Lang:

ftd

Output

Enter mouse cursor over me

Built-in Rive

Elevate your website's visual appeal with built-in Rive animations. Easily embed animations into your fastn documents for engaging user experiences.

Input

-- string $idle: Unknown Idle State

-- ftd.text: $idle

-- ftd.rive:
id: vehicle
src: https://cdn.rive.app/animations/vehicles.riv
autoplay: false
artboard: Jeep
$on-rive-play[idle]$: $ftd.set-string($a = $idle, v = Playing Idle)
$on-rive-pause[idle]$: $ftd.set-string($a = $idle, v = Pausing Idle)


-- ftd.text: Idle/Run
$on-click$: $ftd.toggle-play-rive(rive = vehicle, input = idle)

Lang:

ftd

Output

Unknown Idle State

Idle/Run

Full stack framework

Along with building frontends, fastn can be used for building data driven websites and dashboards.

Seamless API Integration

You can interact with backend APIs, and use the API responses to

Create dynamic web pages,
Display and render the response data
Conditional Rendering. etc.

Checkout the http processor to know more.

fetching data from API

-- import: fastn/processors as pr

-- result r:
$processor$: pr.http
url: https://api.github.com/search/repositories
sort: stars
order: desc
q: language:python

Lang:

ftd

Effortless SQL Interaction

Query data from SQLite databases to create dynamic websites. Our package query processor makes it a breeze.

Working With SQL Is Breeze

-- import: fastn/processors as pr

-- people:
$processor$: pr.package-query
db: db.sqlite

SELECT * FROM user;


-- show-person: $p
for: $p in $people

Lang:

ftd

Opinionated Design System

fastn comes with integrated design system. We've many pre-made design choices so you can build your website quickly.

Unified Color and Typography

A lot of color scheme and typography packages are available, which you can import and change the entire typography or color scheme in a few lines of code.

You can manage color palettes and typography centrally to save time and ensure consistent usage across your website.

fastn Colour Schemes

fastn Typography

Seamless Figma Integration

Integrate Figma tokens with fastn's color scheme or create your own scheme from Figma JSON.

Using Figma tokens with fastn colour scheme

Responsive Ready

fastn has built in support for responsive design. Your creations automatically adapt to the perfect size, whether your users are on mobile or desktop devices.

Search Engine Optimization

Custom and Clean URLs

fastn allows you to map documents to any URL you like, allowing you to make all your URLs clean, and folders organised! You can also create dynamic URLs in fastn.

Optimized Meta Information

Easily manage meta tags and descriptions with fastn. You can fine-tune how your web pages appear in search engine results and increase your site's discoverability. You can also add OG-Image to your page and control the preview of your page link when shared across social platforms.

Adding meta title, description and image

-- ds.page: This is page title
document-title: Welcome!
document-description: Learn how to do SEO! document-image: https://gargajit.github.io/optimization/images/seo-meta.png

Lang:

ftd

URL Redirection

Effortlessly create URL redirections to improve navigation and link consistency, ensuring that your users always find the right content, even when URLs change.

URL Redirection: FASTN.ftd example that uses fastn.redirects

-- import: fastn

-- fastn.package: redirect-example

-- fastn.redirects: 

/ftd/kernel/: /kernel/
/discord/: https://discord.gg/eNXVBMa4xt

Lang:

ftd

Visualize with Vercel

Preview and test your website's appearance and functionality before deployment.

Preview your page before deployment

Why fastn is the best choice for your startup

Stability Guarantee

React, JavaScript often undergo rapid changes which leads to constant relearning and updates. fastn's stability guarantees a consistent development environment, saving startups from the constant disruptions of rapidly changing technologies.

Architectural Decisions Made for you

With fastn, architectural decisions are simplified. We've pre-made many design choices for you, from color schemes to typography roles, allowing you to focus on building your project.

Ecosystem Compatibility

Unlike traditional languages that often lock you into specific ecosystems, fastn is versatile and works well with various backend technologies and frameworks.

Cost-Efficiency

fastn enables novice developers to make meaningful contributions. Cut costs by utilizing a technology that's easy to learn, helping your startup achieve more with less.

With fastn's easy learning curve, you can save on hiring costs by enabling developers of varying levels to efficiently create and manage your web presence.

Get Started with fastn

Install fastn with a Single Command

curl -fsSL https://fastn.com/install.sh | bash

Lang: