🐤 The friendly full-stack language
Alternatives To Imba
Project NameStarsDownloadsRepos Using ThisPackages Using ThisMost Recent CommitTotal ReleasesLatest ReleaseOpen IssuesLicenseLanguage
Imba6,01145412 days ago292September 01, 2022125mitJavaScript
🐤 The friendly full-stack language
Reflex Dom Inbits111
4 months ago2bsd-3-clauseHaskell
A tutorial for reflex-dom with small code bits
Navstack9427 years ago12July 15, 20145JavaScript
Manages multiple screens with mobile-friendly transitions
Ghcjs Dom71
a year ago22Haskell
Make Document Object Model (DOM) apps that run in any browser and natively using WebKitGtk
a year ago8mit
Notas sobre JavaScript Full Stack
7 years ago7JavaScript
Meteor mobile web boilerplate with framework7, react and webpack. Checkout
Im Fe Client46
2 years ago9mitVue
IM application, including server, admin and client.即时通讯应用服务,包含服务端、管理端和客户端
a year agoJavaScript
full_stack_knowledge_list,开发知识体系,主要是全栈开发知识体系。 目的:每一个开发人员都应该形成自己的知识体系,做到提纲挈领。在设计代码,聊技术,面试,系统结构设计,架构设计等时候,能够游刃有余,充满自信。 特点: 1、前端领域:Html和css基础,JavaScript,计算机基础,框架和类库,前端工程,项目构建,算法与数据结构等。 2、后端领域:欢迎补充。。。
Reflex Dom Stack Demo24
7 years agomitHaskell
An example of reflex-dom built by Stack
Front End Common Problems21
5 years ago
🤔Notes for common front-end / full-stack problems in interviews. Covers common algorithms implementation in JavaScript, design patterns, JavaScript basics, Node.js basics, React/Redux basics, ES6 new features, and common code snippets in front end development
Alternatives To Imba
Select To Compare

Alternative Project Comparisons


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.

Get started

Try Imba instantly in your browser with our playground, or create a new project with:

npx imba create


To get started with Imba, we recommend reading through the official guide.

Why Imba?

Minimal syntax

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'

global css html,body m:0 p:0 w:100% h:100%

tag login-form < form

	css input rd:md bc:gray3 h:20px fs:md
	css button rd:md c:white bg:gray4 @hover:blue4

	<self @submit.prevent=api.login(name,secret)>
		<input.username type='text' bind=name>
		<input.password type='password' bind=secret>
		<button> "Login as {name}"

imba.mount <login-form[pos:abs d:grid ja:center]>

Runs on both server and client

Imba powers both the frontend and the backend of, 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).

import express from 'express'
import services from './services.ts'
import html from './index.html'
import image from './confused-cat.png'

const app = express!

app.get '/404' do (req,res)
	res.send String <html> <body>
		<img src=image>
		<h1> "We could not find this page!"

app.get '/' do (req,res)
	res.send html.body

Integrated styling

Inspired 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
global css button
	position: relative
	display: block
	background: #b2f5ea
	@hover background: #b2f9ea

# tailwind-inspired shorthands
global css button
	pos:relative d:block bg:blue5 [email protected]:blue6

tag App
	# scoped styles
	css item bg:blue4 m:2

	<self[d:grid pos:relative]> # inline styles
		<ul> for {type,title} in items
			<li.item is-{type}> title

Blazing fast, Zero config

Imba 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
const worker = import.worker './analyzer'
const analyzer = new Worker(worker.url)
# import an image
const logo = import './images/logo.png'
console.log "logo size: {logo.width}x{logo.height} - at {logo.url}"

When you run your app with the imba command, 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.

Typing and tooling

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'

def flash res\Response, body\string, settings = {}
	let options\CookieOptions = {
		maxAge: 86400
		secure: true
		httpOnly: false



For questions and support, please use our community chat on Discord.



Copyright (c) 2015-present, Sindre Aarsaether

Popular Stack Projects
Popular Dom Projects
Popular Computer Science Categories
Related Searches

Get A Weekly Email With Trending Projects For These Categories
No Spam. Unsubscribe easily at any time.
Programming Language