{"_id":"tiptap-render-view","_rev":"27-7931227229c009db50c983293b964e9d","name":"tiptap-render-view","dist-tags":{"latest":"1.0.4"},"versions":{"1.0.0":{"name":"tiptap-render-view","version":"1.0.0","keywords":["tiptap","prosemirror","render","vue","components","serialize"],"author":{"name":"formfcw"},"license":"GPL-3.0","_id":"tiptap-render-view@1.0.0","maintainers":[{"name":"formfcw","email":"npmjs-220805@formfcw.com"}],"homepage":"https://github.com/formfcw/tiptap-render-view#readme","bugs":{"url":"https://github.com/formfcw/tiptap-render-view/issues"},"dist":{"shasum":"4b2e0943ef4c5e042ffb079eb3c5a43a3ef3e966","tarball":"https://registry.npmjs.org/tiptap-render-view/-/tiptap-render-view-1.0.0.tgz","fileCount":30,"integrity":"sha512-RSebRMtAvrhtymI2P+RfDlZNcFi6G3XcXBdHULNYuMY9b7/HuetWwqghXRJ+cGLvdRp4Cyzxmv0ohmgZmhmIug==","signatures":[{"sig":"MEUCIQCS3OJA0bdy+J6PR/E0GcUUnamVVBO2bjeYYp+C3YpNbwIgVRRBwjI7aDtgCJzoY3GmfoMm5ds78uvu8e0qbC1/P0w=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":547206},"main":"index.js","gitHead":"bd9d9738178c39b59c89ed6d6a73132536a842f3","_npmUser":{"name":"formfcw","email":"npmjs-220805@formfcw.com"},"repository":{"url":"git+https://github.com/formfcw/tiptap-render-view.git","type":"git"},"_npmVersion":"9.5.0","description":"Serialize Tiptap JSON content with interactive components.","directories":{},"_nodeVersion":"18.15.0","dependencies":{"@tiptap/core":"^2.0.4"},"_hasShrinkwrap":false,"devDependencies":{"vue":"^3.3.4","typescript":"^5.1.6"},"_npmOperationalInternal":{"tmp":"tmp/tiptap-render-view_1.0.0_1690449006229_0.9952847980043784","host":"s3://npm-registry-packages"}},"1.0.1":{"name":"tiptap-render-view","version":"1.0.1","keywords":["tiptap","prosemirror","render","vue","components","serialize"],"author":{"name":"formfcw"},"license":"GPL-3.0","_id":"tiptap-render-view@1.0.1","maintainers":[{"name":"formfcw","email":"npmjs-220805@formfcw.com"}],"homepage":"https://github.com/formfcw/tiptap-render-view#readme","bugs":{"url":"https://github.com/formfcw/tiptap-render-view/issues"},"dist":{"shasum":"e55dc10560eb6c551908a4638390c7aed9c3ab65","tarball":"https://registry.npmjs.org/tiptap-render-view/-/tiptap-render-view-1.0.1.tgz","fileCount":29,"integrity":"sha512-/uUkgiaHnE2/0C/33j6XHrRCXHVQQT9BtRDjR4Lkd8lL6Nm/DpnyycJgXdG/S6txhXTmpX4PiKfxZrkEMX2wrg==","signatures":[{"sig":"MEUCIQDH9f+W2yHbP5hLiNM/7+QcZhA81/RJe6dX6rgLf3vzmQIgQRx19ubNNc0UzijQuDNC2SjIp1/epFBxSfrYR56LJYw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":52228},"main":"index.js","gitHead":"a01d9c494dcb0127aa2eb43797e0fce1ce027c61","_npmUser":{"name":"formfcw","email":"npmjs-220805@formfcw.com"},"repository":{"url":"git+https://github.com/formfcw/tiptap-render-view.git","type":"git"},"_npmVersion":"9.8.1","description":"Serialize Tiptap JSON content with interactive components.","directories":{},"_nodeVersion":"18.15.0","dependencies":{"@tiptap/core":"^2.1.8"},"_hasShrinkwrap":false,"devDependencies":{"vue":"^3.3.4","typescript":"^5.2.2"},"_npmOperationalInternal":{"tmp":"tmp/tiptap-render-view_1.0.1_1694524274906_0.6010117169004374","host":"s3://npm-registry-packages"}},"1.0.2":{"name":"tiptap-render-view","version":"1.0.2","keywords":["tiptap","prosemirror","render","vue","components","serialize"],"author":{"name":"formfcw"},"license":"GPL-3.0","_id":"tiptap-render-view@1.0.2","maintainers":[{"name":"formfcw","email":"npmjs-220805@formfcw.com"}],"homepage":"https://github.com/formfcw/tiptap-render-view#readme","bugs":{"url":"https://github.com/formfcw/tiptap-render-view/issues"},"dist":{"shasum":"0515ea0b28a093f3faf46a5d86437f07baf06077","tarball":"https://registry.npmjs.org/tiptap-render-view/-/tiptap-render-view-1.0.2.tgz","fileCount":29,"integrity":"sha512-S59IAT+9hvcli/4GVm9uXAdhX+B1+Iufr1XUc4ggEDAV9/b+VTLfSIEzz2KS0lylmAqgTVHxE3l3L2jmCddMgw==","signatures":[{"sig":"MEUCIBjgaqZ2NELPdCp+PeUXg3RRPowZ+atFusjv5H+QHjjVAiEAvjdZcJEDf1ApxjAw96qrEKd22O6IhDx9BNnSbbrynYI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":52222},"main":"index.js","gitHead":"105cf4dfca852477f03fbf6cf8a4c97ded5d6faf","_npmUser":{"name":"formfcw","email":"npmjs-220805@formfcw.com"},"repository":{"url":"git+https://github.com/formfcw/tiptap-render-view.git","type":"git"},"_npmVersion":"9.8.1","description":"Serialize Tiptap JSON content with interactive components.","directories":{},"_nodeVersion":"18.15.0","dependencies":{"@tiptap/core":"^2.1.8"},"_hasShrinkwrap":false,"devDependencies":{"vue":"^3.3.4","typescript":"^5.2.2"},"_npmOperationalInternal":{"tmp":"tmp/tiptap-render-view_1.0.2_1694527651078_0.22144278807463547","host":"s3://npm-registry-packages"}},"1.0.3":{"name":"tiptap-render-view","version":"1.0.3","keywords":["tiptap","prosemirror","render","vue","components","serialize"],"author":{"name":"formfcw"},"license":"GPL-3.0","_id":"tiptap-render-view@1.0.3","maintainers":[{"name":"formfcw","email":"dev@formfcw.com"}],"homepage":"https://github.com/formfcw/tiptap-render-view#readme","bugs":{"url":"https://github.com/formfcw/tiptap-render-view/issues"},"dist":{"shasum":"ad3ff1fad7f00608d621353d72e6bb9adbf41805","tarball":"https://registry.npmjs.org/tiptap-render-view/-/tiptap-render-view-1.0.3.tgz","fileCount":29,"integrity":"sha512-R+9jC8vjZAS4nkDNtGSTH7/HnXSYpuq6VSLvL3BjwuGjf/+vDxOJlJJFjvVDx37LsXcV0BimzZ7+06VREZ31FA==","signatures":[{"sig":"MEUCIFQkCxxpSnlt1ox+GwaGsQEn3l5IKze3Hw9Sfm7HaMQFAiEA/tobUUYX0LszlwGkyYKdXfIov/FYnTDwiHKT1bo/6Hw=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":52232},"main":"index.js","gitHead":"9a98584b0701a08547df84e98701e7065edcf726","_npmUser":{"name":"formfcw","email":"dev@formfcw.com"},"repository":{"url":"git+https://github.com/formfcw/tiptap-render-view.git","type":"git"},"_npmVersion":"10.9.2","description":"Serialize Tiptap JSON content with interactive components.","directories":{},"_nodeVersion":"22.14.0","dependencies":{"@tiptap/core":"^2.1.8"},"_hasShrinkwrap":false,"devDependencies":{"vue":"^3.3.4","typescript":"^5.2.2"},"_npmOperationalInternal":{"tmp":"tmp/tiptap-render-view_1.0.3_1742986409987_0.4018296806298376","host":"s3://npm-registry-packages-npm-production"}},"1.0.4":{"name":"tiptap-render-view","version":"1.0.4","description":"Serialize Tiptap JSON content with interactive components.","main":"index.js","license":"GPL-3.0","author":{"name":"formfcw"},"repository":{"type":"git","url":"git+https://github.com/formfcw/tiptap-render-view.git"},"keywords":["tiptap","prosemirror","render","vue","components","serialize"],"devDependencies":{"typescript":"^5.2.2","vue":"^3.3.4"},"dependencies":{"@tiptap/core":"^2.1.8"},"_id":"tiptap-render-view@1.0.4","gitHead":"8273c289550a4ff087d6b35f2674ffbd43ade74c","bugs":{"url":"https://github.com/formfcw/tiptap-render-view/issues"},"homepage":"https://github.com/formfcw/tiptap-render-view#readme","_nodeVersion":"22.14.0","_npmVersion":"10.9.2","dist":{"integrity":"sha512-y5VCJFWw4B1/kpO+OsELjvkdJqfaL04eSfvzm2wDMFT/tMtuFIpS2cRkxThQCT6g35Z71e0HU+RFfrpzJ7nLkQ==","shasum":"e32945e1ec8690e4fb761ce5e889b46e3111b5d6","tarball":"https://registry.npmjs.org/tiptap-render-view/-/tiptap-render-view-1.0.4.tgz","fileCount":30,"unpackedSize":522674,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEQCICEuqOLlImlml56e0Smf75ItPMRwsTlR0JAZrvb0mVLPAiAGyRBT2lsIOAWIoxJgjI4LTtx4TUFR32KYZy4tXn1WKg=="}]},"_npmUser":{"name":"formfcw","email":"dev@formfcw.com"},"directories":{},"maintainers":[{"name":"formfcw","email":"dev@formfcw.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/tiptap-render-view_1.0.4_1760277529177_0.894900008000199"},"_hasShrinkwrap":false}},"time":{"created":"2023-07-25T15:00:31.543Z","modified":"2025-10-12T13:58:49.560Z","0.0.0":"2023-07-25T15:00:31.745Z","0.0.1":"2023-07-26T13:32:27.206Z","0.0.2":"2023-07-27T07:12:52.068Z","0.0.3":"2023-07-27T07:16:06.725Z","0.0.4":"2023-07-27T07:33:51.668Z","0.0.5":"2023-07-27T07:35:39.586Z","0.0.6":"2023-07-27T07:37:39.549Z","0.0.7":"2023-07-27T07:41:24.540Z","0.0.8":"2023-07-27T07:52:06.895Z","0.0.9":"2023-07-27T07:56:40.662Z","0.0.10":"2023-07-27T08:53:33.563Z","1.0.0":"2023-07-27T09:10:06.540Z","1.0.1":"2023-09-12T13:11:15.089Z","1.0.2":"2023-09-12T14:07:31.290Z","1.0.3":"2025-03-26T10:53:30.168Z","1.0.4":"2025-10-12T13:58:49.379Z"},"bugs":{"url":"https://github.com/formfcw/tiptap-render-view/issues"},"author":{"name":"formfcw"},"license":"GPL-3.0","homepage":"https://github.com/formfcw/tiptap-render-view#readme","keywords":["tiptap","prosemirror","render","vue","components","serialize"],"repository":{"type":"git","url":"git+https://github.com/formfcw/tiptap-render-view.git"},"description":"Serialize Tiptap JSON content with interactive components.","maintainers":[{"name":"formfcw","email":"dev@formfcw.com"}],"readme":"# Tiptap Render View\n\n[![NPM version](https://img.shields.io/npm/v/tiptap-render-view)](https://www.npmjs.com/package/tiptap-render-view)\n\n<!-- NOTE: [description] Sync description with GitHub and package.json -->\n\nSerialize [Tiptap](https://github.com/ueberdosis/tiptap) JSON content with interactive components.\n\n## Installation\n\n```sh\n# Using npm\nnpm install tiptap-render-view\n# Using yarn\nyarn add tiptap-render-view\n# Using pnpm\npnpm add tiptap-render-view\n```\n\n## Usage\n\nAt the time of writing this package only provides a Vue component to render your `JSONContent`. But it also provides types and tools to build components for your prefered JavaScript framework.\n\n### Vue\n\nCheck out this [example on StackBlitz](https://stackblitz.com/github/formfcw/tiptap-render-view/tree/main/vue/example-app?file=src%2FApp.vue)\n\n```vue\n<template>\n    <RenderNodes\n        :content=\"content\"\n        :serializers=\"serializers\"\n        :componentSerializers=\"componentSerializers\"\n    />\n</template>\n\n<script setup lang=\"ts\">\n    import { Node, Mark } from \"@tiptap/core\";\n    import RenderNodes from \"tiptap-render-view/vue\";\n    import Document from \"@tiptap/extension-document\";\n    import Text from \"@tiptap/extension-text\";\n    import Paragraph from \"@tiptap/extension-paragraph\";\n    import Textfield from \"./components/Textfield.vue\";\n    import type {\n        VueComponentSerializers,\n        JSONContent,\n        Extensions,\n    } from \"./tiptap-render-view/vue\";\n\n    const props = defineProps<{\n        content: JSONContent;\n    }>();\n\n    const serializers: Extensions = [Document, Text, Paragraph];\n\n    const componentSerializers: VueComponentSerializers = [\n        // marks with `type: 'mark'`\n        { name: \"italic\", type: \"mark\", component: Textfield },\n        {\n            name: \"bold\",\n            type: \"mark\",\n            render: (attrs) => [\n                Textfield,\n                { ...attrs, style: \"background:lightgreen\" },\n            ],\n        },\n        // blocks\n        { name: \"heading\", render: (attrs) => [\"textarea\", attrs] },\n    ];\n</script>\n```\n\n### Other Frameworks\n\nFeel free to contribute\n\n## Contribution\n\nContributions are welcome. Make sure to open an issue for bugs or start a discussion for feature requests, before you start writing code!\n","readmeFilename":"README.md"}