{"id":6272,"library":"trame-vtk","title":"VTK widgets for trame","description":"trame-vtk extends the trame web framework with components to interface with VTK (Visualization Toolkit) and/or ParaView. It enables the creation of rich visualization and data processing applications in Python, leveraging VTK's capabilities with options for both remote and client-side rendering via vtk.js. The library is actively developed, receiving regular updates in line with the trame ecosystem. The current version is 2.11.7.","status":"active","version":"2.11.7","language":"en","source_language":"en","source_url":"https://github.com/Kitware/trame-vtk","tags":["VTK","trame","visualization","widgets","web","3D","scientific"],"install":[{"cmd":"pip install trame-vtk","lang":"bash","label":"Install trame-vtk"},{"cmd":"pip install trame trame-vuetify trame-vtk vtk","lang":"bash","label":"Recommended install for trame v3 and VTK"}],"dependencies":[{"reason":"Core client-side communication for trame applications. trame-vtk directly integrates with trame's client.","package":"trame-client","optional":false},{"reason":"The core trame framework. While trame-vtk is a widget library, trame v3 made it an explicit dependency for application development.","package":"trame","optional":false},{"reason":"Provides Vuetify UI widgets for trame applications. Often used alongside trame-vtk for building interactive layouts, and became an explicit dependency in trame v3.","package":"trame-vuetify","optional":false},{"reason":"The Visualization Toolkit Python package. Required for server-side VTK pipeline execution and rendering with VtkRemoteView.","package":"vtk","optional":true}],"imports":[{"note":"Imports the trame-vtk widgets module.","symbol":"vtk","correct":"from trame.widgets import vtk"},{"note":"VtkRemoteView is part of the 'vtk' submodule within trame.widgets. In trame v3, widgets like VtkRemoteView are no longer implicitly available directly under `trame.widgets` without explicit sub-module import.","wrong":"from trame.widgets import VtkRemoteView","symbol":"VtkRemoteView","correct":"from trame.widgets.vtk import VtkRemoteView"},{"note":"For client-side rendering using vtk.js or VTK.wasm.","symbol":"VtkLocalView","correct":"from trame.widgets.vtk import VtkLocalView"},{"note":"Example of importing a specific VTK class. Other VTK objects should be imported from their respective `vtkmodules`.","symbol":"vtkConeSource","correct":"from vtkmodules.vtkFiltersSources import vtkConeSource"}],"quickstart":{"code":"import vtk\nfrom trame.app import get_server\nfrom trame.ui.vuetify3 import VAppLayout\nfrom trame.widgets import vuetify3 as v3\nfrom trame.widgets.vtk import VtkRemoteView\nfrom vtkmodules.vtkFiltersSources import vtkConeSource\nfrom vtkmodules.vtkRenderingCore import (vtkActor, vtkPolyDataMapper, vtkRenderer, vtkRenderWindow)\n\n# -----------------------------------------------------------------------------\n# VTK pipeline\n# -----------------------------------------------------------------------------\n\ncone = vtkConeSource()\nmapper = vtkPolyDataMapper()\nmapper.SetInputConnection(cone.GetOutputPort())\nactor = vtkActor()\nactor.SetMapper(mapper)\n\nrenderer = vtkRenderer()\nrenderer.AddActor(actor)\nrenderer.ResetCamera()\n\nrender_window = vtkRenderWindow()\nrender_window.AddRenderer(renderer)\n\n# -----------------------------------------------------------------------------\n# Trame setup\n# -----------------------------------------------------------------------------\n\nserver = get_server('trame_vtk_cone')\nserver.client_type = \"vue3\" # Explicitly set for trame v3 and above\nstate, ctrl = server.state, server.controller\n\nwith VAppLayout(server, full_height=True) as layout:\n    with v3.VContainer(fluid=True, classes='fill-height'):\n        with VtkRemoteView(render_window) as view:\n            ctrl.view_update = view.update\n            ctrl.view_reset_camera = view.reset_camera\n\n@state.change('resolution')\ndef update_resolution(resolution, **kwargs):\n    cone.SetResolution(resolution)\n    ctrl.view_update()\n\n@ctrl.add('reset_camera')\ndef reset_camera():\n    ctrl.view_reset_camera()\n\nif __name__ == '__main__':\n    server.start()","lang":"python","description":"This quickstart demonstrates a basic trame-vtk application displaying a VTK cone. It sets up a simple VTK pipeline, integrates it with a `VtkRemoteView` widget within a trame `VAppLayout`, and adds a slider to control the cone's resolution. It explicitly sets `server.client_type = \"vue3\"` for compatibility with recent `trame` versions."},"warnings":[{"fix":"Ensure your project's `pip install` commands explicitly list `trame-vtk` and any other required widget libraries (e.g., `trame-vuetify`). Example: `pip install trame trame-vuetify trame-vtk`.","message":"With the release of `trame` v3, `trame-vtk` (along with `trame-vuetify` and other widget sets) is no longer an implicit dependency of the core `trame` package. Applications must now explicitly install `trame-vtk` and other required widget packages.","severity":"breaking","affected_versions":"trame>=3.0.0"},{"fix":"For applications intended to use Vue2, explicitly set the client type during server initialization: `server.client_type = \"vue2\"`. For new applications, consider migrating to Vue3 compatible widgets and layouts, or ensure `trame-vuetify3` is used instead of `trame-vuetify`.","message":"Starting January 2024, `trame` v3 began defaulting to a Vue3 client. Existing applications built with Vue2-based widgets might experience breakage. While `trame` aims for backward compatibility, it's safer to explicitly declare the client type.","severity":"breaking","affected_versions":"trame>=3.0.0"},{"fix":"When developing or testing, open browser developer tools and enable 'Disable cache' in the Network tab. Then, reload the web page. This option usually only works while the developer tools are open.","message":"Web browser caches can cause issues when switching between Vue2 and Vue3-based trame applications, leading to unexpected rendering or behavior.","severity":"gotcha","affected_versions":"All versions of trame with mixed Vue2/Vue3 applications"},{"fix":"Be aware of potential subtle differences in rounding behavior if you are implementing custom view size calculations in Python that need to precisely match the client-side `Math.round` behavior. For most direct usage of `trame-vtk` components, this is handled internally.","message":"The `vue-vtk-js` library (used by `trame-vtk`) uses `Math.round` for setting view sizes, which rounds half to the nearest even integer. Python's built-in `round()` function might behave differently depending on the Python version (e.g., Python 3's `round()` also rounds half to even, but custom implementations or older Python versions might vary).","severity":"gotcha","affected_versions":"All versions"},{"fix":"For new applications or when aiming for advanced client-side rendering capabilities, consider using `trame-vtklocal`. It provides a `VtkLocalView` component similar to `trame-vtk`'s, but leverages VTK.wasm for improved fidelity and performance. Note that `trame-vtklocal>=1` is compatible with VTK 10, while `trame-vtklocal>=0.16,<1` supports VTK 9.4-9.6.","message":"Kitware is actively developing `trame-vtklocal` as the default implementation for local rendering using VTK.wasm, replacing the older `vtk.js` based local rendering in `trame-vtk`. While `trame-vtk` still supports `vtk.js`, `trame-vtklocal` offers a more robust solution.","severity":"deprecated","affected_versions":"trame-vtk and trame>=2.x"}],"env_vars":null,"last_verified":"2026-04-14T00:00:00.000Z","next_check":"2026-07-13T00:00:00.000Z","problems":[]}