Skip to main content

Platforms & Frameworks

Boodoo is engineered with zero JavaScript framework lock-in. Whether you are building with Angular, Cordova/PhoneGap, Meteor.js, Photon desktop UI, React Native Web, or Native Mobile (iOS & Android), Boodoo integrates cleanly into your stack.

🅰️
Angular

Zero build collision. Import stylesheets into angular.json or component styles, and call Boodoo APIs inside lifecycle methods.

Cordova & PhoneGap

Optimized for hybrid WebViews with automatic deviceready event hooks, viewport safe areas, and touch ergonomics.

Meteor.js

Instant reactivity in Meteor Blaze or React templates with zero CSS bundle conflicts.

Photon Desktop UI

Built-in Electron and macOS native desktop chrome: header toolbars, pane groups, and tab bars with .native-photon.

React Native Web

Combine universal React Native components with Boodoo responsive CSS classes and design tokens.

create-boodoo CLI

Instantly scaffold working starters for all platforms using npx create-boodoo.

1. Angular Integration

Install boodoo in your Angular project:

npm install boodoo

Include the compiled CSS bundle in your angular.json under architect.build.options.styles:

"styles": [
  "node_modules/boodoo/dist/css/boodoo.min.css",
  "src/styles.css"
],
"scripts": [
  "node_modules/boodoo/dist/js/boodoo.js"
]

Or import Boodoo inside your root styles.scss:

@import "boodoo/scss/boodoo";

You can trigger Boodoo toasts and interactive components from Angular TypeScript controllers:

import { Component } from '@angular/core';

declare const boodoo: any;

@Component({
  selector: 'app-root',
  standalone: true,
  template: `
    <div class="container py-4">
      <div class="card p-4 shadow-sm">
        <h2 class="text-primary">Angular + Boodoo</h2>
        <button type="button" class="btn btn-primary" (click)="showToast()">Show Toast</button>
      </div>
    </div>
  `
})
export class AppComponent {
  showToast() {
    boodoo?.toast?.('Angular triggered Boodoo notification!', { variant: 'primary' });
  }
}

2. Cordova & PhoneGap Hybrid Apps

Boodoo is lightweight and fast, making it ideal for mobile WebViews without runtime overhead. Boodoo's JS core automatically listens for the Cordova/PhoneGap deviceready lifecycle event.

In your index.html:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="initial-scale=1, width=device-width, viewport-fit=cover">
  <title>Hybrid Mobile App</title>
  <link rel="stylesheet" href="node_modules/boodoo/dist/css/boodoo.min.css">
  <style>
    body {
      padding-top: env(safe-area-inset-top);
      padding-bottom: env(safe-area-inset-bottom);
    }
  </style>
</head>
<body class="native-ios bg-light">
  <header class="native-navbar">
    <span class="fs-6 fw-bold">Mobile App</span>
    <span class="badge bg-success">Ready</span>
  </header>
  <main class="container py-3">
    <div class="card p-3 shadow-sm">
      <button type="button" class="btn btn-primary w-100 rounded-pill" id="action-btn">Trigger Alert</button>
    </div>
  </main>
  <script src="cordova.js"></script>
  <script src="node_modules/boodoo/dist/js/boodoo.js"></script>
</body>
</html>

3. Meteor.js Full-Stack

Meteor applications benefit from Boodoo's zero-build runtime compatibility. Add Boodoo to your Meteor app:

meteor npm install boodoo

In your client entrypoint (e.g. client/main.js):

import 'boodoo/dist/css/boodoo.min.css';
import boodoo from 'boodoo';
import { Template } from 'meteor/templating';
import './main.html';

Template.dashboard.events({
  'click #btn-notify'() {
    boodoo.toast('Meteor reactive update delivered!', { variant: 'success' });
  }
});

4. Photon Desktop UI

For Electron, desktop, or classic macOS-style window layouts, Boodoo ships built-in Photon UI classes:

  • .native-photon or [data-boodoo-platform="photon"] — Activates the Photon desktop styling container
  • .toolbar-header / .toolbar-footer — Native gradient toolbars with dragging enabled
  • .window-content, .pane-group, and .pane-sidebar — Responsive split window panes
  • .nav-group and .nav-group-item — Classic desktop sidebar navigation items
  • .tab-group and .tab-item — Desktop application tab bars

For live examples and interactive demos, visit the Photon Native UI Documentation.

5. React Native Web

When sharing code across React Native (iOS/Android) and React Native Web, you can import Boodoo's compiled CSS or design tokens into your web root:

import 'boodoo/dist/css/boodoo.min.css';
import { View, Text, TouchableOpacity } from 'react-native';

export default function App() {
  return (
    <View style={{ padding: 20 }}>
      <div className="card p-4 shadow-sm text-center">
        <h3 className="text-primary mb-2">React Native Web + Boodoo</h3>
        <p className="text-muted">Hybrid universal design architecture.</p>
      </div>
    </View>
  );
}

6. React Native Mobile (iOS & Android)

Boodoo delivers native mobile components and design tokens for pure iOS and Android applications with zero DOM and zero heavy runtime dependencies:

A. Native Boodoo Component Suite

Import clean, drop-in components with auto-theming, tactile touch feedback, and responsive typography: 

import React from 'react';
import { BoodooProvider, Card, Button, Badge, Text } from 'boodoo/react-native';

export default function App() {
  return (
    <BoodooProvider theme="light">
      <Card variant="elevated">
        <Card.Title title="Native Mobile App" subtitle="iOS & Android" />
        <Card.Content>
          <Badge variant="primary">Zero Bloat</Badge>
          <Text variant="lead">Clean design system without Material 3 clutter.</Text>
        </Card.Content>
        <Card.Actions>
          <Button variant="primary" size="sm" onPress={() => console.log('Tapped!')}>
            Get Started
          </Button>
        </Card.Actions>
      </Card>
    </BoodooProvider>
  );
}

B. React Native Paper Theme Preset (Drop-in Adapter)

Already using React Native Paper? Upgrade your app's aesthetics without refactoring existing components using Boodoo's Material 3 theme preset:

import { Provider as PaperProvider } from 'react-native-paper';
import { boodooPaperLightTheme, boodooPaperDarkTheme } from 'boodoo/paper';

export default function App() {
  return (
    <PaperProvider theme={boodooPaperLightTheme}>
      <YourAppNavigation />
    </PaperProvider>
  );
}

C. Universal Design Tokens

Need raw tokens for custom StyleSheet.create layouts? Import token dictionaries directly: 

import { colors, spacing, radii, typography, shadows } from 'boodoo/tokens';

const styles = StyleSheet.create({
  header: {
    backgroundColor: colors.primary,
    padding: spacing[4],
    borderRadius: radii.lg,
    ...shadows.md,
  },
});

For a detailed architectural comparison, read the boodoo vs React Native Paper guide.

7. Instant Scaffolding via create-boodoo

Run the official CLI scaffolder to generate a configured starter for any platform with full JavaScript (JS) and TypeScript (TS) support:

# Interactive wizard (prompts for template & language)
npx create-boodoo my-new-project

# Or scaffold unattended with flags (--ts or --js)
npx create-boodoo my-desktop-app --template=electron --ts
npx create-boodoo my-react-app --template=react --ts
npx create-boodoo my-angular-app --template=angular --ts
npx create-boodoo my-mobile-app --template=expo --ts

Choose from 10 curated templates available in both JavaScript and TypeScript:

  1. HTML5 + Sass Starter (Vanilla, Fast & Clean, JS/TS)
  2. Vite + Vanilla (Modern dev server & HMR, JS/TS)
  3. Next.js / React (App Router + Boodoo CSS, JS/TS)
  4. Electron Desktop App (Cross-Platform Native UI, JS/TS)
  5. Angular Starter (Standalone Components + Boodoo, TS/JS)
  6. Cordova & PhoneGap (Hybrid Mobile App, JS/TS)
  7. Meteor.js (Full-Stack Reactive App, JS/TS)
  8. Photon Desktop UI (Classic macOS / Electron Pane layout, JS/TS)
  9. React Native Web (Universal Web & Mobile, JS/TS)
  10. React Native Mobile (Expo) (Expo SDK 51, iOS & Android, Boodoo Native UI, JS/TS)