Getting Started

Getting started with Melony is quick and easy. The fastest way to begin is by cloning our starter repository, which provides a pre-configured environment with all the necessary dependencies.

Quick Start

1. Clone the Melony starter repository:

git clone https://github.com/melonydev/melony-starter.git
cd melony-starter

2. Install Dependencies

npm install

3. Run the Development Server

npm run dev

4. Open http://localhost:3000 with your browser to see your Melony application in action.

Creating Your First View

Melony makes it incredibly easy to create views for your internal tools. Here's a simple example of how to define a view:

import { defineView } from "melony";
import { listUsersAction } from "./actions/user";
export const usersListView = defineView(
  "list",
  {
    title: "Users",
    fields: {
      name: { label: "Name", filterable: true },
      email: { label: "Email", filterable: true },
      role: { label: "Role", filterable: true },
    },
    headerButtons: [{ label: "Create User", viewId: "userCreateView" }],
    itemButtons: [{ label: "Edit", viewId: "userEditView" }],
    onItemClick: { viewId: "userDetailView" },
    showInNavigation: true,
  },
  listUsersAction
);

This example creates a list view for users with filterable fields, header and item buttons, and navigation settings. The listUsersAction is a server action that fetches the user data.

With just this simple definition, Melony will generate a fully functional user interface for listing users, complete with filtering, pagination, and navigation to other views.