Imba is a friendly full-stack programming language for the web that compiles to performant JavaScript. It has language-level support for defining, extending, subclassing, instantiating and rendering DOM nodes.
Try Imba instantly in your browser with our playground, or create a new project with:
npx imba createTo get started with Imba, we recommend reading through theofficial guide.
Imba's syntax is minimal, beautiful, and packed with clever features. It combines logic, markup and styling in a powerful way. Fewer keystrokes and less switching files mean you'll be able to build things fast.
import'./util/reset.css'
globalcsshtml,bodym:0p:0w:100%h:100%
taglogin-form<form
cssinputrd:mdbc:gray3h:20pxfs:md
cssbuttonrd:mdc:whitebg:gray4@hover:blue4
<self@submit.prevent=api.login(name,secret)>
<input.usernametype='text'bind=name>
<input.passwordtype='password'bind=secret>
<button>"Login as {name}"
imba.mount<login-form[pos:absd:gridja:center]>Imba powers both the frontend and the backend of Scrimba, our learning platform with 100K+ monthly active users. On the frontend, Imba replaces e.g., Vue or React, and on the backend, it works with the Node ecosystem (e.g., npm).
importexpressfrom'express'
importservicesfrom'./services.ts'
importhtmlfrom'./index.html'
importimagefrom'./confused-cat.png'
constapp=express!
app.get'/404'do(req,res)
res.sendString<html> <body>
<imgsrc=image>
<h1>"We could not find this page!"
app.get'/'do(req,res)
res.sendhtml.bodyInspired by Tailwind, Imba brings styles directly into your code. Styles can be scoped to files, components, and even parts of your tag trees. Style modifiers like @hover, @lg, @landscape and @dark can be used for extremely concise yet powerful styling.
#global styles
globalcssbutton
position:relative
display:block
background:#b2f5ea
@hoverbackground:#b2f9ea
#tailwind-inspired shorthands
globalcssbutton
pos:relatived:blockbg:blue5bg@hover:blue6
tagApp
#scoped styles
cssitembg:blue4m:2
<self[d:gridpos:relative]>#inline styles
<ul>for{type,title}initems
<li.itemis-{type}>titleImba comes with a built-in bundler based on the blazing fast esbuild. Import stylesheets, images, typescript, html, workers and more without any configuration. Bundling is so fast that there is no difference between production and development mode - it all happens on-demand.
#importing a worker
constworker=import.worker'./analyzer'
constanalyzer=newWorker(worker.url)
#import an image
constlogo=import'./images/logo.png'
console.log"logo size: {logo.width}x{logo.height} - at {logo.url}"When you run your app with theimbacommand, it automatically bundles and compiles your imba code, along with typescript, css and many other file types. It provides automatic reloading of both the server and client.
The tooling is implemented as a typescript server plugin giving us great intellisense, diagnostics, and even cross-file refactorings that works with js/ts files in the same project. You can import types just like in typescript, and annotate variables, parameters and expressions. Like the language, the tooling is still in Alpha, but improving every day.
import type{CookieOptions}from'express-serve-static-core'
defflashres\Response,body\string,settings={}
letoptions\CookieOptions={
...settings
maxAge:86400
secure:true
httpOnly:false
}
res.cookie('flash',body,options)For questions and support, please use our community chat on Discord.
Copyright (c) 2015-present, Sindre Aarsaether
