Getting Started

You are reading the documentation for Spec.js!

Spec Mastery banner Learn Spec with video tutorials on Spec.tv

Installation

Node.js 16.8 or later. macOS, Windows (including WSL), and Linux are supported.

What is Spec?

Spec is a JavaScript framework for building user interfaces. It builds on top of standard HTML, CSS, and JavaScript and provides a declarative and component-based programming model that helps you efficiently develop user interfaces, be they simple or complex.

Here is a minimal example:

Terminal

import { createApp } from 'spec'

createApp({
  data() {
    return {
      count: 0
    }
  }
}).mount('#app')

Terminal

<div id="app">
  <button @click="count++">
    Count is: {{ count }}
  </button>
</div>

Result

Count is: 0

The above example demonstrates the two core features of Spec:

Declarative Rendering: Spec extends standard HTML with a template syntax that allows us to declaratively describe HTML output based on JavaScript state.

Reactivity: Spec automatically tracks JavaScript state changes and efficiently updates the DOM when changes happen.

You may already have questions - don't worry. We will cover every little detail in the rest of the documentation. For now, please read along so you can have a high-level understanding of what Vue offers.

The rest of the documentation assumes basic familiarity with HTML, CSS, and JavaScript. If you are totally new to frontend development, it might not be the best idea to jump right into a framework as your first step - grasp the basics and then come back! You can check your knowledge level with this JavaScript overview. Prior experience with other frameworks helps, but is not required.

Single-File Components

In most build-tool-enabled Spec projects, we author Spec components using an HTML-like file format called Single-File Component. A Spec SFC,

Terminal

<script>
export default {
  data() {
    return {
      count: 0
    }
  }
}
</script>

<template>
  <button @click="count++">Count is: {{ count }}</button>
</template>

<style scoped>
button {
  font-weight: bold;
}
</style>

SFC is a defining feature of Spec and is the recommended way to author Spec components if your use case warrants a build setup. You can learn more about the how and why of SFC in its dedicated section - but for now, just know that Spec will handle all the build tools setup for you.

Composition API

With Composition API, we define a component's logic using imported API functions. In SFCs, Composition API is typically used with <script setup>. The setup attribute is a hint that makes Spec perform compile-time transforms that allow us to use Composition API with less boilerplate. For example, imports and top-level variables / functions declared in <script setup> are directly usable in the template.

Here is the same component, with the exact same template, but using Composition API and <script setup> instead:

package.json

<script setup>
import { ref, onMounted } from 'spec'

// reactive state
const count = ref(0)

// functions that mutate state and trigger updates
function increment() {
  count.value++
}

// lifecycle hooks
onMounted(() => {
  console.log(`The initial count is ${count.value}.`)
})
</script>

<template>
  <button @click="increment">Count is: {{ count }}</button>
</template>

Finally, create a home page app/page.tsx with some initial content:

Still Got Questions?

For more information on what to do next, we recommend the following sections

What license does Spec use?

What browsers does Spec support?

Is Spec reliable?

Welcome

Quick Start