Classicy is a collection of React components that make it easy to add a customizable Webtop to your app with a unique & retro look.

DesktopDesktop
DesktopDesktop
DesktopDesktopDesktop
Desktop

It’s easy to ‘Classicy’ any React app!

<ClassicyAppManagerProvider>
    <ClassicyDesktop>
        <ClassicyApp id="MyApp.app" name="My App">
            <ClassicyWindow id="main" appId="MyApp.app" title="Hello">
                <YourReactAppGoesHere />
            </ClassicyWindow>
        </ClassicyApp>
    </ClassicyDesktop>
</ClassicyAppManagerProvider>

Install with npm install classicy, then import classicy/dist/classicy.css.

 

What is it?

••••••

Classicy is a Webtop framework. It provides a simulated desktop environment in a web browser.

Classicy also provides a powerful and easy-to-use framework and library of components to “Classicy” any React application.

Classicy’s components are written in TypeScript, and can be used with any React framework.

Classicy emulates all the common items of a true Operating System and Graphical User Interface.

Formerly known as Platinum.

What does it look like?

Just like this!

Classicy re-creates the look and feel of Mac OS 8 using modern technologies, such as React and TypeScript.

What's a Webtop?

A Webtop, or Web Desktop, is a Desktop Environment (DE) created in a Web browser.

Just like your own personal computer, a Webtop provides many basic functions, like a Desktop, Windows or Menus.

Classicy faithfully replicates the user experience of Classic Operating Systems, bringing delight to fans of old and inspiration to newcomers.

We would say we “simulate” our favorite operating systems, but Classicy is a true DE, providing all the major elements of the Paper Paradigm and WIMP: a Desktop, Applications, Control Panels, Widgets, Folders, Files, Windows, Icons, Menus and more!

 

Classicy Features

••••••

Classicy is a React framework that provides a full Desktop Environment in a browser, and allows you to add your own apps easily.

Install it with npm install classicy, import classicy/dist/classicy.css, and you're ready to go. Classicy works with React 18 and 19.

Applications

The ClassicyApp and ClassicyWindow components provide a simple wrapper to make any view a Classicy Application, complete with menus, icons and windows. Our Building Apps guide walks you through it step by step.

Form Elements

Get started making your app Classicy by using a built-in library of over 35 components. Each one replaces a familiar HTML element, so a <button> becomes a ClassicyButton, with theming, sounds and balloon help for free. Browse them all in our Storybook.

INCLUDED COMPONENTS

  • Button
  • Bevel Button
  • Checkbox
  • Radio Input
  • Text Input
  • Textarea Input
  • Rich Text Editor
  • Spinner
  • Slider
  • Pop-Up Menu (with groups)
  • Combo Box
  • List Box
  • Date Picker
  • Time Picker
  • Color Picker
  • Tabs
  • Disclosure Triangle
  • Control Group
  • Label
  • Form Fieldset
  • Form
  • Separator
  • Split View
  • Table
  • Progress Bar
  • Meter
  • Output
  • Keyboard Shortcut
  • Link
  • Balloon Help
  • Alerts & Dialogs
  • File Dialogs
  • File Browser
  • Contextual Menu
  • Submenus
  • QuickTime Movie

Built-in Apps

Every Classicy desktop comes with a suite of classic applications, ready to go. Play and author stacks in HyperCard, edit text in SimpleText, browse files in the Finder, and open PDFs, movies, pictures and web pages. Don't need one? Turn it off with a single prop.

INCLUDED APPS

  • Finder
  • SimpleText
  • HyperCard
  • PDF Viewer
  • Movie Player
  • Picture Viewer
  • Web Viewer

Control Panels & Extensions

Customize the desktop with the Appearance Manager: 21 color themes like Bondi, Sapphire and Lavender, plus fonts, wallpapers and sound sets. Set a virtual clock in Date & Time, and let your idle desktop drift off to Flying Toasters, Fish, Warp and nine more classic screen savers, or register your own.

INCLUDED CONTROL PANELS & EXTENSIONS

  • Appearance Manager
  • Date & Time
  • Sound
  • Drive Setup
  • Screen Saver
  • Apple Guide

Filesystem

Use the browser-based storage filesystem from Classicy to store and organize files with zero configuration. Seed a default filesystem for first-time visitors, migrate returning visitors' files, create snapshots, and mirror to your own backend with a sync adapter.

Desktop in a Browser

Desktop icons, the Finder, window and app management, color themes, sound effects, screen savers, balloon help and more. Classicy aims to recreate Mac OS 8 faithfully, right down to its underlying behaviors.

For Developers

Desktop state persists automatically. Built-in hooks connect Google Analytics and Tag Manager, and a log sink delivers Classicy's logs, errors and crash reports to your app.

Using an AI coding agent? Point it at our Agent Reference, a complete guide to the public API that ships with the package.

 

About Platinum

••••••

Classicy's look-and-feel is based on Mac OS 8's interface, Platinum.

Originally part of project Copland, the Platinum UI was one of many innovations that would be saved from the failed Copland OS. It served as an important transitional UI from the stark, black-and-white System 7 to the much-discussed Aqua that came with Mac OS X “Cheetah.”

Classicy aims to accurately reflect the experience of using a Classic Mac, complete in every detail–from common icons to the unique, and often-times amusing, sound effects. Like Mac OS 8.5's Appearance Manager, Classicy lets you color your desktop with themes like Bondi, Sapphire and Lavender.

Also, our website design is loosely based on Apple Documentation and Graphic Design Standard of the same era.

 

Try it out

••••••

  • Click Here for a Demo

    Please Note: Our demo is based on our main, working branch, and can sometimes be wonky. Our apologies as we continue to build new features and sometimes make Sad Macs of others.

  • Learn about Classicy's origins


    Read how this all started, then come join the fun! We're always looking for developers to join our cause!