@eldrex/papyr-3d
Advanced tools
Write modern, secure, reactive, and privacy-first web applications with zero dependencies and zero compile steps.
Create an HTML file and run this minimal working code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Hello Papyr.js</title>
<!-- Include CDN -->
<script src="https://papyrus-js.vercel.app/papyr-complete.js"></script>
</head>
<body>
<div id="app"></div>
<script>
// Create reactive state
let count = papyr.state(0);
// Render UI
let app = papyr.div({ style: { padding: '40px', fontFamily: 'sans-serif' } },
papyr.h1("Greetings from Papyr.js! 🚀"),
papyr.button(
() => `Clicked ${count.value} times`,
{
onclick: () => count.value++,
style: { padding: '10px 20px', borderRadius: '6px', cursor: 'pointer' }
}
)
);
papyr.mount("#app", app);
</script>
</body>
</html>
persist: true).papyr.renovate): Live audits (accessibility, performance, responsiveness) and progressive component replacements preserving existing styles.papyr.db.use) for Supabase, Firebase, Postgres, MySQL, and MongoDB.rect, circle, ellipse), curves (bezier, spline), morphing blobs, SVG pattern generators, and CSS 3D projections (cube, sphere, card tilt).papyr.layout.gpu): Renders box hierarchies directly on WebGL2 fragment shaders to completely bypass CPU layout reflow computations.papyr.api.fetch): API interceptors caching JSON objects into an encrypted IndexedDB offline vault and queuing mutation ledgers for background sync.papyr.py): Declarative layout builder aliases (Box, Text, Button, Input) designed to look and write like clean, semantic Python code.Philosophy: Powerful by default. Flexible by design. Transparent by architecture.
Papyrus 3.1.3 adds zero new end-user features. It adds the formal control surface, SDK maturity layer, and trust architecture required before the ecosystem expands further.
| API | Description |
|---|---|
papyr.config(domain, values) | Unified declarative configuration engine for all runtime settings |
papyr.controls.* | Imperative runtime controls for rendering, animation, design, WATT, and scheduler |
papyr.trust | 4-zone trust boundary model with runtime audit and CI/CD support |
papyr.access | Advisory 3-tier namespace access classification (Full / Restricted / Protected) |
papyr.watt.sdk | WATT developer SDK — permission flows, consent banners, transparency dialogs |
papyr.pssr.sdk | PSSR SDK — per-route rendering strategy, lazy islands, meta pipelines, edge config |
papyr.freeform | Framework detection, selective subsystem activation, Vue/React bridges |
papyr.sdk (extended) | Plugin validator, adapter registry, config snapshot/restore, controls introspection |
| Package | Description |
|---|---|
@eldrex/papyr-watt | WATT SDK standalone — npm install @eldrex/papyr-watt |
@eldrex/papyr-pssr | PSSR SDK standalone — npm install @eldrex/papyr-pssr |
| Bundle | Use |
|---|---|
papyr-watt.js / papyr-watt.esm.js | WATT SDK standalone |
papyr-pssr.js / papyr-pssr.esm.js | PSSR SDK standalone |
papyr-trust.js | Trust audit for CI/CD (no browser engine) |
// Configuration (declarative)
papyr.config('rendering', { mode: 'ssr', targetFps: 60 });
papyr.config('animation', { duration: 300, reducedMotion: 'auto' });
papyr.config('watt', { mode: 'strict' });
// Controls (imperative)
papyr.controls.rendering.setPriority('high');
papyr.controls.animation.disableAll(); // accessibility
papyr.controls.design.setTheme('dark');
papyr.controls.scheduler.pause();
// WATT SDK
papyr.watt.sdk.flow({ name: 'camera', apis: ['camera'], onGranted, onDenied });
papyr.watt.sdk.consent({ categories: ['analytics'], onConsentChange });
papyr.watt.sdk.disclose({ name: 'Stripe', domain: 'stripe.com', type: 'payment' });
// PSSR SDK
papyr.pssr.sdk.strategy({ default: 'ssr', routes: { '/blog/*': 'ssg' } }).apply();
papyr.pssr.sdk.islands({ lazy: true, threshold: 0.1 });
await papyr.pssr.sdk.build.prerender({ routes, concurrency: 4 });
// Trust Boundaries
papyr.trust.owns('watt.policies'); // true — Zone 1
papyr.trust.zone('my-plugin'); // 2 — Plugin layer
papyr.trust.audit(); // { passed, violations, warnings }
// Freeform Freedom
papyr.freeform.detect(); // { react: true, vue: false, tailwind: true }
papyr.freeform.use(['state', 'watt']); // selective activation
papyr.freeform.vue(app); // Vue 3 bridge
$$\text{State} \rightarrow \text{UI updates automatically}$$
When a state's .value mutations occur, the Papyr Runtime Engine executes targeted updates specifically on the elements that referenced that state.
Include the compiled single runtime module inside your HTML:
<script src="https://papyrus-js.vercel.app/papyr-complete.js"></script>
# Core framework
npm install @eldrex/papyr
# WATT SDK (privacy & consent)
npm install @eldrex/papyr-watt
# PSSR SDK (rendering strategies)
npm install @eldrex/papyr-pssr
import { papyr } from '@eldrex/papyr';
import { watt } from '@eldrex/papyr-watt';
import { pssr } from '@eldrex/papyr-pssr';
Run and inspect the interactive test suites inside the browser:
Papyr is a front-end framework running client-side in the user's browser. It includes standard, developer-facing AJAX wrapper utilities (papyr.api.get, papyr.api.post, and papyr.fetch) that reference the native browser fetch() API.
Because the compiled JavaScript bundles contain these standard fetch() API calls, static security analysis scanners (such as Socket) will flag the packages with a Network Access / Supply Chain Security alert.
Please rest assured:
Papyrus 3.1.3 introduces a formally documented 4-Zone Trust Model:
| Zone | Owner | Responsibility |
|---|---|---|
| 1 | Papyrus Framework | Core enforcement, WATT, security kernel |
| 2 | Plugins (developer-installed) | Additive-only, scoped APIs |
| 3 | Third-Party Services | Monitored by WATT, not controlled |
| 4 | Developer | App logic, auth, data validation, compliance |
// CI/CD audit
const { trust } = require('./papyr-trust.js');
const result = trust.audit();
if (!result.passed) process.exit(1);
Papyr.js is distributed under the MIT License.
FAQs
3D and immersive scene graphics system for Papyr.js
We found that @eldrex/papyr-3d demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
The White House’s Gold Eagle Initiative aims to coordinate AI-discovered vulnerabilities, validate findings, and accelerate patching across critical software.
Security News
A Shai-Hulud infection exposed Suno's source code, which shows the AI music startup stream-ripped tracks to train its models.
Security News
Vercel is formalizing a monthly release program for Next.js. The change follows React2Shell and a sharp rise in AI-assisted vulnerability discovery.