magic modules are predefined modules for webapps.

module definition

the minimal module is a function that returns some html.

// /assets/ModuleName.mjs// simplest moduleexport const View = () => div('hello, world')// complete signatureexport const View = (props = {}, children = []) => div('hello, world')


if the npm package name starts with @magic-modules/ or magic-module-, it will get imported automagically. the name of the Module will be set to a PascalCased version of the remainder of the module name. @magic-modules/git-badges, for example, turns into GitBadges. the same is true for all uppercased files in your /assets/ directory and subdirectories. in the rare case where you want to install a npm module that can not be found, you can import it in /assets/index.mjs

// /assets/index.mjsexport default {  // ...otherModules  // load module from node_modules  NpmModule: require('not-standard-named-magic-module-from-npm'),}

after this, the module will be a global in your app and can be used like any other component.

// any page or moduleexport default state => div([  // module without props  Mod(),  'modules that need props: ',  Mod({ state, customProp: true }),


modules are the building blocks of @magic. modules can be used to add both client and server functionality to your @magic app.