Kobweb

Web development in Kotlin leveraging Compose HTML

Install Kobweb

# Homebrew: Mac / Linux
$ brew install varabyte/tap/kobweb

# Scoop: Windows
> scoop install varabyte/kobweb

# SDKMAN! Mac / Windows / *nix
$ sdk install kobweb

Front Matter

---
root: .components.layout.ArticleLayout
author: BitSpittle
tags:
  - Web Dev
  - Tech
  - Kotlin
---

 @Composable
fun ArticleLayout(content: @Composable () -> Unit) {
    val ctx = rememberPageContext()
    val markdown = ctx.markdown!!
    val author = 
        markdown.frontMatter.getValue("author").single()
    val tags =
        markdown.frontMatter.getValue("tags")
    /* ... */
} @Composable
fun ArticleLayout(content: @Composable () -> Unit) {
    val ctx = rememberPageContext()
    val markdown = ctx.markdown!!
    val author = 
        markdown.frontMatter.getValue("author").single()
    val tags =
        markdown.frontMatter.getValue("tags")
    /* ... */
} @Composable
fun ArticleLayout(content: @Composable () -> Unit) {
    val ctx = rememberPageContext()
    val markdown = ctx.markdown!!
    val author = 
        markdown.frontMatter.getValue("author").single()
    val tags =
        markdown.frontMatter.getValue("tags")
    /* ... */
} @Composable
fun ArticleLayout(content: @Composable () -> Unit) {
    val ctx = rememberPageContext()
    val markdown = ctx.markdown!!
    val author = 
        markdown.frontMatter.getValue("author").single()
    val tags =
        markdown.frontMatter.getValue("tags")
    /* ... */
}

 // build.gradle.kts
kotlin {
    configAsKobwebApplication(
        "app",
        includeServer = true
    )
 
    sourceSets {
        jsMain.dependencies { /* ... */ }
        jvmMain.dependencies {
            compileOnly(libs.kobweb.api)
            /* ... */
        }
    }
} // build.gradle.kts
kotlin {
    configAsKobwebApplication(
        "app",
        includeServer = true
    )
 
    sourceSets {
        jsMain.dependencies { /* ... */ }
        jvmMain.dependencies {
            compileOnly(libs.kobweb.api)
            /* ... */
        }
    }
}

Kobweb Web development in Kotlin leveraging Compose HTML

	Div(attrs = {
	attr("id", "example")
	style {
	property("width", 50.px)
	property("height", 25.px)
	}
	})

	Div(attrs = {
	attr("id", "example")
	style {
	property("width", 50.px)
	property("height", 25.px)
	}
	})

	Div(attrs = {
	attr("id", "example")
	style {
	property("width", 50.px)
	property("height", 25.px)
	}
	})

	Div(attrs = {
	attr("id", "example")
	style {
	property("width", 50.px)
	property("height", 25.px)
	}
	})

	Div(attrs = {
	id("example")
	style {
	width(50.px)
	height(25.px)
	}
	})

	object AppStyleSheet
	: StyleSheet() {
	val rect by style {
	width(50.px)
	height(50.px)
	}
	}

	plugins {
	alias(libs.plugins.kotlin.multiplatform)
	alias(libs.plugins.jetbrains.compose)
	alias(libs.plugins.kobweb.application)
	alias(libs.plugins.kobwebx.markdown)
	}

	kobweb {
	app {
	index {
	description.set("Powered by Kobweb")
	}
	}
	}

	kotlin {
	configAsKobwebApplication("app")

	sourceSets {
	/* ... */
	}
	}

	# .kobweb/conf.yaml
	site:
	title: "App"

	server:
	port: 8080

	files:
	dev:
	contentRoot: "build/processedResources/js/main/public"
	script: "build/dist/js/developmentExecutable/app.js"
	api: "build/libs/app.jar"
	prod:
	script: "build/dist/js/productionExecutable/app.js"
	siteRoot: ".kobweb/site"

	Div(attrs =
	Modifier
	.attrsModifier {
	id("example")
	}
	.styleModifier {
	width(50.px)
	height(25.px)
	}
	.toAttrs()
	)

	Div(attrs = Modifier
	.id("example")
	.width(50.px)
	.height(25.px)
	.toAttrs()
	)

	// com/mysite/pages/About.kt

	package com.mysite.pages

	@Page
	@Composable
	fun AboutPage() {
	/* ... */
	}

	// com/mysite/pages/Index.kt

	package com.mysite.pages

	@Page
	@Composable
	fun IndexPage() {
	/* ... */
	}

	// com/mysite/pages/DroidconSf.kt

	package com.mysite.pages

	@Page
	@Composable
	fun DroidconPage() {
	/* ... */
	}

	// com/mysite/pages/blog/_2024/DroidconSf.kt

	package com.mysite.pages.blog._2024

	@Page
	@Composable
	fun DroidconPage() {
	/* ... */
	}

	// com/mysite/pages/patchNotes/Latest.kt

	package com.mysite.pages.patchNotes

	@Page
	@Composable
	fun LatestPage() {
	/* ... */
	}

	<!-- example.html -->
	<div
	id="example"
	class="rect"
	/>

	<!-- example.html -->
	<div
	id="example"
	class="rect"
	/>

	<!-- example.html -->
	<div
	id="example"
	class="rect"
	/>

	/* example.css */
	.rect {
	width: 50px;
	height: 25px;
	}

	// com/mysite/acronyms/Html.kt

	package com.mysite.pages

	@Page("HTML")
	@Composable
	fun AboutPage() {
	/* ... */
	}

	// com/mysite/pages/releases/_1_0_0/PackageMapping.kt
	@file:PackageMapping("1.0.0")

	package com.mysite.pages.releases._1_0_0

	import com.varabyte.kobweb.core.PackageMapping

	// com/mysite/pages/users/user/PackageMapping.kt
	@file:PackageMapping("{user}")

	package com.mysite.pages.users.user

	import com.varabyte.kobweb.core.PackageMapping

	// com/mysite/pages/users/user/posts/Post.kt
	package com.mysite.pages.users.user.posts

	@Page("{post}")
	@Composable
	fun PostPage() {
	/* ... */
	}

	// com/mysite/pages/users/user/PackageMapping.kt
	@file:PackageMapping("{}")

	package com.mysite.pages.users.user

	import com.varabyte.kobweb.core.PackageMapping

	// com/mysite/pages/users/user/posts/Post.kt
	package com.mysite.pages.users.user.posts

	@Page("{}")
	@Composable
	fun PostPage() {
	/* ... */
	}

	@Page
	@Composable
	fun WatchPage() {
	val ctx = rememberPageContext()

	val videoId = ctx.route.params.getValue("v").toInt()

	/* ... */
	}

	import com.mysite.components.sections.NavHeader
	import com.mysite.components.sections.Footer

	@Composable
	fun PageLayout(content: @Composable () -> Unit) {
	Column {
	NavHeader()
	content()
	Footer()
	}
	}

	import com.mysite.components.layouts.PageLayout

	@Page
	@Composable
	fun IndexPage() {
	PageLayout {
	/* ... */
	}
	}

	Img(
	src =
	"/images/buster.jpg",
	attrs =
	Modifier.fillMaxSize()
	.toAttrs()
	)

	Div(modifier.backgroundColor(Colors.Cyan).toAttrs())
	Tooltip(ElementTarget.PreviousSibling, "Hello!!!")

	val RectStyle = CssStyle {
	base {
	Modifier
	.width(50.px)
	.height(25.px)
	}
	}

	val RectStyle = CssStyle(
	extraModifier =
	Modifier.id("example")
	) {
	base {
	Modifier
	.width(50.px)
	.height(25.px)
	}
	}

	val HoverStyle = CssStyle {
	base {
	Modifier
	.size(50.px)
	.backgroundColor(Colors.Cyan)
	}

	hover {
	Modifier.backgroundColor(Colors.Orange)
	}
	}

	val RectStyle = CssStyle.base {
	Modifier
	.width(50.px)
	.height(25.px)
	}

	val SquareStyle = CssStyle.base {
	Modifier
	.size(50.px)
	.backgroundColor(Colors.Orange)
	}

	val RotatedSquareStyle = SquareStyle.extendedByBase {
	Modifier
	.rotate(45.deg)
	.backgroundColor(Colors.Cyan)
	}

	var colorMode by ColorMode.currentState
	Button(
	onClick = { colorMode = colorMode.opposite },
	Modifier.borderRadius(50.percent).padding(0.px)
	) {
	if (colorMode.isLight) FaSun() else FaMoon()
	}

	val ColorBoxStyle = CssStyle.base {
	Modifier
	.size(50.px)
	.backgroundColor(
	if (colorMode.isDark) {
	Colors.Pink
	} else {
	Colors.DarkRed
	}
	)
	}

	val ResponsiveStyle = CssStyle {
	base { Modifier.backgroundColor(Colors.Red) }
	Breakpoint.SM { Modifier.backgroundColor(Colors.Yellow) }
	Breakpoint.MD { Modifier.backgroundColor(Colors.Green) }
	Breakpoint.LG { Modifier.backgroundColor(Colors.Blue) }
	}

	// build.gradle.kts
	kotlin {
	sourceSets {
	jsMain.dependencies {
	implementation(libs.silk.icons.fa)
	}
	}
	}