{"id":17867,"library":"path-framework","title":"Path Framework","description":"Path Framework is an application framework and rendering engine developed at Zurich University of Applied Sciences (ZHAW). It enables the creation of applications based on a technology-independent GUI model defined in JSON format, allowing the underlying rendering engine (e.g., for web, iOS, Android) to be swapped out as needed. Currently in beta version 0.8.0-beta.8, its release cadence is frequent, reflecting ongoing development towards a stable 1.0 release. Key differentiators include an emphasis on extremely rapid application prototyping and development, GUI-based requirements engineering, and a focus on business logic programming rather than direct GUI programming. It supports using either mock data or integrating with any backend REST service, abstracting away UI implementation details. This approach streamlines development by separating the application's structure and behavior from its visual presentation.","status":"active","version":"0.8.0-beta.8","language":"javascript","source_language":"en","source_url":"https://github.com/mosazhaw/path","tags":["javascript","GUI","JSON","REST","Rapid Application Development","Rapid Application Manufacturing"],"install":[{"cmd":"npm install path-framework","lang":"bash","label":"npm"},{"cmd":"yarn add path-framework","lang":"bash","label":"yarn"},{"cmd":"pnpm add path-framework","lang":"bash","label":"pnpm"}],"dependencies":[],"imports":[{"note":"Path Framework primarily uses ES Modules. While CommonJS is supported, ESM is the recommended modern approach, especially for browser contexts.","wrong":"const PathApplication = require('path-framework').PathApplication;","symbol":"PathApplication","correct":"import { PathApplication } from 'path-framework';"},{"note":"This type definition is crucial for type-checking your JSON GUI models and ensuring correct structure within TypeScript projects.","symbol":"PathApplicationModel","correct":"import { PathApplicationModel } from 'path-framework';"},{"note":"For more complex or programmatic model construction, the PathBuilder can be used, though direct JSON models are common.","symbol":"PathBuilder","correct":"import { PathBuilder } from 'path-framework';"}],"quickstart":{"code":"import { PathApplication, PathApplicationModel } from 'path-framework';\n\nconst helloWorldModel: PathApplicationModel = {\n    application: {\n        title: \"Path Demo\",\n        formList: [\n            {\n                id: \"HelloWorldForm\",\n                title: \"HelloWorld\",\n                formFieldList: [\n                    {\n                        id: \"name\",\n                        type: \"text\",\n                        name: \"Project\",\n                        width: 2,\n                        required: true\n                    },\n                    {\n                        type: \"deleteButton\",\n                        name: \"Delete\"\n                    },\n                    {\n                        type: \"cancelButton\",\n                        name: \"Cancel\"\n                    },\n                    {\n                        type: \"okButton\",\n                        name: \"Ok\"\n                    }\n                ]\n            }\n        ],\n        pageList: [\n            {\n                id: \"mainmenu\",\n                name: \"MainMenu\",\n                elementList: [\n                    {\n                        type: \"button\",\n                        name: \"HelloWorld\",\n                        icon: \"fa-fast-forward\",\n                        color: \"alizarin\",\n                        form: {\n                            form: \"HelloWorldForm\"\n                        }\n                    }\n                ]\n            }\n        ]\n    }\n};\n\ntry {\n    const app = new PathApplication(helloWorldModel);\n    console.log(`Path Application \"${app.getApplicationTitle()}\" initialized successfully.`);\n    console.log(`Forms available: ${app.getFormList().map(f => f.getId()).join(', ')}`);\n    console.log(`Pages available: ${app.getPageList().map(p => p.getId()).join(', ')}`);\n    // To render this application visually, you would typically pass 'app' to a rendering engine\n    // like 'path-framework-web' in a browser environment.\n    // Example: new WebPathRenderer(app).render(document.body);\n} catch (error) {\n    console.error(\"Failed to initialize Path Application:\", error);\n}","lang":"typescript","description":"This quickstart demonstrates how to initialize a Path Application using a basic 'HelloWorld' GUI model, verifying its successful setup and access to model elements."},"warnings":[{"fix":"Consult the project's CHANGELOG.md and GitHub releases for specific migration steps when updating to newer beta versions.","message":"As 'path-framework' is currently in a beta release (0.8.0-beta.8), breaking changes may occur frequently between minor or patch versions. Users should review the changelog carefully when upgrading.","severity":"breaking","affected_versions":">=0.0.0"},{"fix":"Install and configure the appropriate rendering engine package for your target platform (e.g., `npm install path-framework-web` for web-based projects) and integrate it with your `PathApplication` instance.","message":"Path Framework provides a technology-independent GUI model and core application logic. It does *not* include a default visual rendering engine out of the box. To display your application in a browser or on a specific platform, you need to integrate a separate rendering package (e.g., 'path-framework-web' for web applications).","severity":"gotcha","affected_versions":">=0.8.0"},{"fix":"Ensure your GUI models strictly adhere to the `PathApplicationModel` TypeScript interface, leveraging IDE features for autocompletion and type checking when defining models.","message":"The framework relies heavily on JSON-based GUI models. While flexible, incorrect JSON structure or missing required properties in your `PathApplicationModel` will lead to runtime errors or unexpected behavior during application initialization.","severity":"gotcha","affected_versions":">=0.8.0"}],"env_vars":null,"last_verified":"2026-04-23T00:00:00.000Z","next_check":"2026-07-22T00:00:00.000Z","problems":[{"fix":"Run `npm install path-framework` or `yarn add path-framework` in your project directory.","cause":"The 'path-framework' package is not installed or incorrectly referenced in your project's `package.json`.","error":"Module not found: Can't resolve 'path-framework'"},{"fix":"Ensure you are using named imports for `PathApplication`: `import { PathApplication } from 'path-framework';`.","cause":"Attempting to instantiate `PathApplication` using an incorrect import method (e.g., `require('path-framework')` without destructuring) or when using a default export incorrectly.","error":"TypeError: PathApplication is not a constructor"},{"fix":"Change your file extension to `.mjs` or ensure your `package.json` includes `\"type\": \"module\"`. Alternatively, configure your build process (e.g., Webpack, Rollup) to transpile ESM to CJS, or use `require` syntax if you must stick to CommonJS: `const { PathApplication } = require('path-framework');`","cause":"You are using ES Module `import` syntax in a CommonJS (`.js`) file that is not configured as an ES module, or in an environment that doesn't support ESM.","error":"Cannot use import statement outside a module"},{"fix":"Provide a complete `PathApplicationModel` object with at least the top-level `application` key, as defined by the framework's schema.","cause":"Attempting to pass an empty or malformed object to `new PathApplication()`, which expects a structured `PathApplicationModel`.","error":"Property 'application' is missing in type '{}' but required in type 'PathApplicationModel'."}],"ecosystem":"npm","meta_description":null,"install_score":null,"install_tag":null,"quickstart_score":null,"quickstart_tag":null}