pastel - unique frontend framework

Defying Gravity — Tue, 18 Mar 2025 18:31:27 +0000

Hi!

Over the last month, I have been working on a frontend framework for TypeScript called Pastel.

Pastel is a frontend framework I designed to be simple to use and integrate into existing projects. It does not require any usage of compilers, like Babel, or any custom syntax. It can be added easily to any project and the minified source is only about 12Kb in size.

The key thing that makes pastel unique is a feature it contains called pipelines.
Pipelines provide an easy way to modify components dynamically before they are rendered. For example:

const pipeline = new Pipeline([
  /* this adds a text-xl class to all p elements */
  {
    modifier: 'attributes',
    function: (attributes: any) => {
      attributes['class'] = 'text-xl'
      return attributes
    },
    whitelist: [
      "p"
    ]
  },
  /* this replaces Hello with Hi on all components */
  {
    modifier: 'text',
    function: (text: string) => {
      return text.replace('Hello', 'Hi')
    },
  },

  /* this applies a font size to all input elements */
  {
    modifier: 'style',
    function: (style: any) => {
      style['font-size'] = '2rem!important'
      return style
    },
    whitelist: [
      'input'
    ]
  }
])
pipeline.mount();

The main API of Pastel looks like this:

Components

Pastel components are classes that extend the Component class or any of its subclasses. For example, the Button class is a subclass of the Component class.

import { Button } from '@pastel-framework/core'

export class MyButton extends Button {
  constructor() {
    super()
    this.text = 'Click me!'
    this.onClick(() => {
      console.log('Button clicked!')
    });
    this.withClassName("my-button");
  }
}

Now, you can use the MyButton component in your main file:

import { Component } from '@pastel-framework/core'
import { MyButton } from './my-button.js'

export default class App extends Component {
  constructor() {
    super();

    this.withChildren(
      MyButton
    )
  }
}

State & Templates

Pastel components have a state object that can be used to store data. The state object is a simple key-value store that can be accessed using the state property of the component.

import { Button } from '@pastel-framework/core'

export class MyButton extends Button {
  constructor() {
    super()
    this.text = 'You clicked the button {{count}} times!'
    this.onClick(() => {
      console.log('Button clicked!')
      this.state.set('count', (this.state.get('count') ?? 0) + 1)
    });
    this.withClassName("my-button");
  }
}

In this example, we create a simple button component that increments a counter when clicked. The state property is used to store the counter value.

Pastel is still in development and has not been fully tested yet. If you're interested in trying it out or contributing, check out the source code on Pastel's Github Repo

DEV Community: Defying Gravity

pastel - unique frontend framework

The main API of Pastel looks like this: