MachVive is open source and free forever - contribute on GitHub

Installation

Learn how to install and set up MachVive in your project with npm, yarn, or CDN.

Getting started with MachVive is quick and easy. Choose the installation method that works best for your project.

Package Manager Installation

npm

npm install @machvive/core

yarn

yarn add @machvive/core

pnpm

pnpm add @machvive/core

CDN Installation

For quick prototyping or simple projects, you can include MachVive directly from a CDN:

<script src="https://unpkg.com/@machvive/core@latest/dist/machvive.min.js"></script>

Module Import

ES6 Modules

import { MachVive, Component } from '@machvive/core';

CommonJS

const { MachVive, Component } = require('@machvive/core');

UMD (Browser)

<script src="https://unpkg.com/@machvive/core@latest/dist/machvive.umd.js"></script>
<script>
  const { MachVive, Component } = window.MachVive;
</script>

Development Setup

Prerequisites

  • Node.js 16.0 or higher
  • npm 7.0 or higher (or equivalent yarn/pnpm version)

Create a New Project

# Create project directory
mkdir my-machvive-app
cd my-machvive-app

# Initialize package.json
npm init -y

# Install MachVive
npm install @machvive/core

# Install development dependencies
npm install --save-dev @machvive/cli webpack webpack-cli

Project Structure

my-machvive-app/
├── src/
│   ├── components/
│   ├── styles/
│   └── index.js
├── public/
│   └── index.html
├── package.json
└── webpack.config.js

TypeScript Support

MachVive includes full TypeScript support out of the box:

npm install @machvive/core
npm install --save-dev typescript @types/node

Create a tsconfig.json:

{
  "compilerOptions": {
    "target": "ES2020",
    "module": "ESNext",
    "moduleResolution": "node",
    "strict": true,
    "jsx": "preserve",
    "esModuleInterop": true,
    "skipLibCheck": true,
    "forceConsistentCasingInFileNames": true
  },
  "include": ["src/**/*"],
  "exclude": ["node_modules", "dist"]
}

Verification

Create a simple test to verify your installation:

// src/index.js
import { MachVive } from '@machvive/core';

const app = new MachVive({
  target: document.getElementById('app'),
  template: '<h1>Hello, MachVive!</h1>'
});

console.log('MachVive is working!', app);

<!-- public/index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>MachVive Test</title>
</head>
<body>
    <div id="app"></div>
    <script src="../src/index.js"></script>
</body>
</html>

What’s Next?

Now that you have MachVive installed, you’re ready to start building:

Troubleshooting

Common Issues

Module not found errors:

  • Ensure you’ve installed MachVive: npm list @machvive/core
  • Check your import paths are correct

TypeScript errors:

  • Install type definitions: npm install --save-dev @types/machvive
  • Update your tsconfig.json configuration

Build failures:

  • Ensure Node.js version is 16.0 or higher: node --version
  • Clear your package cache: npm cache clean --force

Need more help? Check our GitHub Issues or join the community discussion.