STM32 Pinout reMAP Tool — Static Version

A fully static web application for exploring and editing STM32 pinouts. It runs without any server-side code (pure HTML/CSS/JavaScript) and can be deployed to GitHub Pages or any static hosting/CDN.

WIP status

• This project is a Work In Progress. Some features are not finished yet.
• User data loading/import is currently not working.
• The BACK button may not navigate correctly on GitHub Pages.
• There are known bugs, but the core functionality is generally OK.

❤️ Support the project

If you want faster progress and new features, please consider supporting the project on Ko‑fi:

• Ko‑fi: https://ko-fi.com/creapunk

Your support will help prioritize the following roadmap items:

• Bug fixes and overall stability
• Optimized, faster search
• Pin‑to‑pin compatible MCU suggestions (respecting critical peripherals)
• Automatic peripheral assignment helpers
• Support for additional MCU families
• Other quality‑of‑life improvements from the todo list

🚀 Features

• 100% static site — no server required
• Hash-based routing — deep links to MCUs (#/mcu/STM32...)
• Lazy loading — MCU JSON files are fetched on demand
• In-memory caching — speeds up revisits
• Offline-friendly — changes persist in localStorage
• 2596 MCUs — complete STM32 database

📁 Project structure

reMap/
├── index.html              # Landing page (pure static HTML)
├── static/
│   ├── style_index.css     # Base styles
│   ├── css-variables.css   # CSS variables
│   └── js/
│       ├── app.js          # App entry (routing and initialization)
│       ├── app-functions.js # Core business logic
│       ├── data.js         # Loading all_mcus
│       └── modules/
│           ├── router.js         # SPA router (hash-based)
│           ├── mcu-loader.js     # MCU data loader/cache
│           ├── search.js         # Search
│           ├── sort.js           # Sorting
│           ├── json-handler.js   # JSON helpers
│           └── header-manager.js # Header/controls state
├── data/
│   ├── all_mcus.json       # List of all MCUs (~250 KB)
│   └── *.json              # Individual MCU files (2596 files)
└── pinouts/                # Source XML (not needed for deployment)

🌐 Deploy to GitHub Pages

Automatic deployment

1. Create a GitHub repo and push this code

2. In the repository settings go to Settings → Pages

3. Under Source select:

   • Branch: main (or master)
   • Folder: / (root)

4. Нажмите Save

5. Your site will be available at: https://username.github.io/repository-name/

Required files for deployment

Deploy the following:

• index.html
• static/ (all files)
• data/ (all JSON files)

You do NOT need:

• pinouts/ (source XML)
• backend/ (Python parsers)
• app.py, generate_data.py (server scripts)
• Any .py files

🛠️ Local development

Requirements

• Python 3.7+ (only for data generation, if needed)
• Modern browser
• Local static web server

Data generation (one-time)

If you have STM32 pinout XMLs, generate JSON once:

python generate_data.py

This will create the data/ folder with all required JSON files.

Run a local server

Option 1: Python (simple)

python -m http.server 8000

Open http://localhost:8000

Option 2: Node.js (any OS)

npx serve .

Option 3: VS Code Live Server

Install the "Live Server" extension and run it on index.html

📖 Usage

Navigation

• Home (/ or #/) — list of all MCUs
• MCU page (#/mcu/STM32C011D6Y) — work with a specific MCU

Working with the app

1. Select an MCU

   • Use search on the home page
   • Click a row to open its pinout

2. Edit pinout

   • Toggle peripheral signals by clicking pills
   • Add custom pin names
   • Lock rows via the lock button

3. Saving

   • Changes are auto-saved to localStorage
   • Export JSON via SAVE
   • Copy Markdown via COPY (Preview mode)

4. Loading

   • Import previously saved JSON via LOAD

🔧 Technical details

Architecture

Routing:

• Hash-based (#/path) for GitHub Pages compatibility
• Route handlers: list (home), mcu (MCU page)
• Simple navigation history with Back support

Data loading:

• all_mcus.json loads once on start (~250 KB)
• Individual MCU JSONs load on demand
• In-memory cache for fast reopens

State storage:

• localStorage for configurations
• sessionId for multi-tab safety
• Auto-save on change

Modules API

Router (router.js)

// Navigation
Router.navigateToMcu('STM32C011D6Y');
Router.navigateToList();
Router.goBack();

// Register handlers
Router.registerRouteHandler('mcu', handleMcuRoute);

MCU Loader (mcu-loader.js)

// Load data
const mcuData = await McuLoader.loadAndTransformMcuData('STM32C011D6Y');

// Preload
await McuLoader.preloadMcuData(['STM32C011D6Y', 'STM32G474RE']);

// Cache
const size = McuLoader.getCacheSize();
McuLoader.clearMcuCache('STM32C011D6Y');

Data Module (data.js)

// Load all MCUs
const mcus = await loadAllMcusData();

// Find
const mcu = findMcuByName('STM32C011D6Y');

// Filter
const filtered = filterMcus({ flash: '32K', ram: '6K' });

🎨 Customization

Colors

Edit static/css-variables.css to change theme colors:

:root {
    --bg-primary: #1e1e1e;
    --bg-secondary: #2d2d2d;
    --text-primary: #e0e0e0;
    /* ... */
}

Adding new MCUs

1. Add an XML file to pinouts/
2. Run python generate_data.py
3. New JSON files will appear in data/

🐛 Troubleshooting

CORS issues (local)

If JSONs fail to load locally:

• Use a local web server (see above)
• Do not open index.html via file://

Routing issues

• Ensure you use hash URLs: #/mcu/...
• Check DevTools Console for JavaScript errors

Caching issues

Clear localStorage:

localStorage.clear();
location.reload();

📝 License

Made by Anton Khrustalev, CREAPUNK, 2025.

🤝 Support

If this pinout tool was helpful, please support the author on Ko‑fi ☕

🔗 Useful links

• ST Microelectronics
• STM32 Documentation
• GitHub Pages Docs