A playground for building creative web apps – powered by Gleam.

Overview

Lustre

A framework for building create web apps – powered by Gleam and React!


Package Version Hex Docs

import gleam/int
import lustre
import lustre/element.{button, div, p, text}
import lustre/event.{dispatch, on_click}
import lustre/cmd

pub fn main() {
  let app = lustre.application(#(0, cmd.none()), update, render)
  lustre.start(app, "#app")
}

pub type Action {
  Incr
  Decr
}

fn update(state, action) {
  case action {
    Incr -> #(state + 1, cmd.none())
    Decr -> #(state - 1, cmd.none())
  }
}

fn render(state) {
  div(
    [],
    [
      button([on_click(dispatch(Decr))], [text("-")]),
      p([], [text(int.to_string(state))]),
      button([on_click(dispatch(Incr))], [text("+")]),
    ],
  )
}

❗️ This package relies on Gleam's JavaScript FFI and is intended to be run in the browser. It will not work if your are targetting Node.js or Erlang.


Installation

If available on Hex, this package can be added to your Gleam project:

gleam add lustre

and its documentation can be found at https://hexdocs.pm/lustre. You will also need to install react and react-dom from npm:

npm i react react-dom

Development

First, make sure you have both Gleam and Node.js installed, then:

npm i
npm start

This sets up chokidar to watch our gleam source code and runs the compiler whenever we make a change. It also starts a server that will serve the examples located in test/example/.

You might also like...
A toolkit for React, Preact, Inferno & vanilla JS apps, React libraries and other npm modules for the web, with no configuration (until you need it)
A toolkit for React, Preact, Inferno & vanilla JS apps, React libraries and other npm modules for the web, with no configuration (until you need it)

nwb nwb is a toolkit for: Quick Development with React, Inferno, Preact or vanilla JavaScript Developing: React Apps Preact Apps Inferno Apps Vanilla

A starter project for web 3 apps

Web3 Starter Web 3 Starter is a modern web 3 starter template project. Here's the full stack of frameworks/libraries used: Next.js React TailwindCSS f

A starter project for web 3 apps

Web3 Starter Web 3 Starter is a modern web 3 starter template project. Here's the full stack of frameworks/libraries used: Next.js React TailwindCSS f

A universal boilerplate for building web applications w/ TypeScript, React, Redux, Server Side Rendering and more.

Vortigern Vortigern is our opinionated boilerplate for crafting universal web applications by using modern technologies like TypeScript, React and Red

Toolkit for building scalable web applications with TypeScript, React, Redux and Apollo-Client
Toolkit for building scalable web applications with TypeScript, React, Redux and Apollo-Client

TsToolbox Toolkit for building scalable web applications with TypeScript, React, Redux and Apollo-Client (inspired by ReKit) ⚠ ⚠ ⚠ Work in Progress ⚠

This project is about building a web application to show a weather forecast using weather API.
This project is about building a web application to show a weather forecast using weather API.

Weather App Web application to show the current and upcoming week weather forecast. Want to see live preview » ✧ View Demo ✧ Report Bug ✧ Getting Star

GraphQL first full-stack starter kit with Node, React. Powered by TypeScript
GraphQL first full-stack starter kit with Node, React. Powered by TypeScript

GraphQL first full-stack starter kit with Node, React. Powered by TypeScript

This is a template for a Typescript-powered, redux-equipped, React application template supported by Eslint and other basic rules.

Getting Started with React-TS-Redux-App This project was bootstrapped with Create React App. What is it This is a template for Typescript powered, red

Powered by Vite, React, TypeScript and Tailwinfusing the R&M API

Rick and Morty Randomizer Using the Rick and Morty API, I created a SPA that randomly renders a character from the show along with their info. Languag

Comments
  • docs: fix the example so that it compiles

    docs: fix the example so that it compiles

    I had to change the init and update function to use a tuple of #(state, cmd) and to make the Action type public. Gleam format added some noise to the diff

    opened by megapctr 1
Owner
Hayleigh Thompson
Hayleigh Thompson
Javascript Explorer Playground do Start Tech React

Bem-vinde ao JEP! JavaScript Explorer Playground (JEP) é um explorador virtual voltado para o aprendizado da linguagem JavaScript (ECMAScript). Ideali

Start Tech React 9 Nov 25, 2021
Rollup + React + Babel + Prettier + Strict ESlint and Stylelint + Sass + VSCode + Playground app - Enterprise grade boilerplate

React package boilerplate by HackingBay Rollup + React 17 + Babel + Prettier + Strict ESlint and Stylelint + Sass + VSCode + Playground app - Enterpri

HackingBay 2 Jan 19, 2022
MERN Stack Boilerplate provides starter kits for building web, desktop and mobile apps

MERN Stack Boilerplate MERN Stack Boilerplate provides starter kits for building web, desktop and mobile apps in pure JavaScript. Create New MERN App

MERN Stack Boilerplate 1 Nov 8, 2021
Building web, Electron, Cordova and Chrome apps, and cross-browser extensions with React, Redux and Webpack. "Write once, deploy everywhere" concept in practice.

CrossBuilder Building web, Electron, Cordova and Chrome apps, and cross-browser extensions that use Redux actions for messaging. Redux states are sync

Mihail Diordiev 488 Sep 8, 2022
Building web, Electron, Cordova and Chrome apps, and cross-browser extensions with React, Redux and Webpack. "Write once, deploy everywhere" concept in practice.

CrossBuilder Building web, Electron, Cordova and Chrome apps, and cross-browser extensions that use Redux actions for messaging. Redux states are sync

Mihail Diordiev 488 Sep 8, 2022
Vtexio-react-apps - Apps react para plafaforma VTEX.

Projeto Modal + Apps Extras Projeto modal setando cookies. Desenvolvido em React + TypeScript para aplicação em e-commerce VTEXIO. ?? Este projeto se

Marcelo 1 Jan 3, 2022
A minimal skeleton for building testable React apps using Babel

Essential React A minimal skeleton for building testable React apps using Babel. Design Goals Getting Started Commands server build test coveralls cle

Mark Fayngersh 2k Nov 20, 2022
An opinionated CLI for building redux/react apps quicker

______ _ _____ _ _____ | ___ \ | | / __ \| | |_ _| | |_/ /___ __| |_ ___ ________| / \/

Spencer Dixon 889 Nov 15, 2022
Small boilerplate project for building React apps with Serverless functions

Serverless + React Stack A simple, containerized project for quickly starting with Serverless and React. The goal of this project is to containerize d

Kent Safranski 2 Feb 8, 2022
Create-sonnat-app - Set up a modern web app which is powered by Sonnat

Create Sonnat App Set up a modern web app which is powered by Sonnat. Usage yarn

Sonnat 2 Jan 31, 2022