Wed Framework

The Wed Framework is a simple web framework for Dart, inspired by React and using Flutter syntax. It provides a set of basic components and a global method for rendering the application.

Getting Started


To use the Wed framework, first you’ll need to create a new Dart web project and add the wed package to your pubspec.yaml file:

  wed: ^0.0.5

Or just run the following command:

$ dart pub add wed


Then, you can import the package into your project and start using the provided components:

import 'dart:html';

import 'package:wed/wed.dart';

final app = querySelector("#output") as DivElement;

void main() {
  renderApp(MyComponent(), app);

class MyComponent extends Component {
  var text = 'Hello World';
  var isClicked = false;

  void toggleText() {
    isClicked = !isClicked;
    text = isClicked ? 'Clicked' : 'Hello World';

  List<Component> build() {
    return [
        props: DivProps(
          styles: CssStyle(
            width: Units.vw(100),
            height: Units.vh(100),
            backgroundColor: 'lightblue',
        children: [
            props: ButtonProps(
              innerText: text,
              styles: CssStyle(
                backgroundColor: 'blue',
                fontSize: Units.rem(2),
                color: 'white',
                padding: Padding.symmetric(horizontal: 30, vertical: 20),
                borderRadius: BorderRadius.all(12),
                borderWidth: Units.none,
                cursor: Cursor.pointer,
              onClick: (_) {
                setState(() {

Classes and Helpers

The Component class is the base class for all components, and it contains a basic set of methods for rendering the component and updating its state.

Component Class

The Component class contains the following methods:

  • render(): This method returns a Widget object that represents the component’s current state.
  • setState(): This method allows the component’s state to be updated, triggering a re-render.

CssStyle Class

The ComponentBaseProps class is the base class for all component props classes.


Contributions are welcome! If you have any suggestions or improvements, please open an issue or submit a pull request.



The Wed Framework is licensed under the MIT License.


View Github