Skip to content
This repository has been archived by the owner. It is now read-only.
A Beginner Friendly Rusty WASM Framework
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Type Name Latest commit message Commit time
Failed to load latest commit information.

Papito (पपितो) = Papaya

Deprecated : No Longer Maintained

Build Status

A Vue & React inspired Frontend Web Framework in Rust for the WASM platform. Developed by a beginner for beginners.


  • Beginner Friendly. Draws cues from Vue and React.
  • Pure Rust web apps.
  • Cargo only (without webpack). Should provide optional tools that mimic loaders such as file-loader, style-loader, url-loader.

It is still under active development. So tread carefully.


#![feature(proc_macro, conservative_impl_trait)]

extern crate papito_codegen;
extern crate papito_dom;
extern crate papito;
extern crate stdweb;

use papito_codegen::{component, render, events, event};
use papito::prelude::{Render, Lifecycle};
use papito_dom::prelude::VNode;
use papito::App;
use stdweb::web::event::ClickEvent;

struct Div;

impl Render for Div {
    fn render(&self) -> VNode {
        h!("div", { "style" => "background-color: #fafafa; color: #666;" },
                h!("This is the front page of web."),
                h!(comp Button, { style => "background-color: black; color: white;".to_string() })

struct Button {
    style: String,
    click: bool

impl Button {
    fn on_click(&mut self, _: ClickEvent) {
        let inv = !;

impl Lifecycle for Button {
    fn created(&mut self) {
        console!(log, &format!("Initial click value: {}",;

    fn updated(&mut self) {
        console!(log, &format!("You clicked the button: {}",;

impl Render for Button {
    fn render(&self) -> VNode {
        let click = self.inner.borrow().click;
        let style = self.inner.borrow().style.clone();
            h!("h1", h!("Hello World!")),
            h!("button", { "style" => style }, [ self.on_click() ], h!("Click")),
            h!("h3", h!(if click { "You clicked" } else { "You unclicked" }))

fn main() {

Features Supported

  • Component props
  • Component Events
  • DOM Events
  • Reactive states
  • Component Lifecycle (only some)
  • Server Renderer
  • Hyperscript macro h!
  • Vue-like template syntax
  • Context API?
You can’t perform that action at this time.