Creating a Sketch NSPanel

100%

Creating a Sketch NSPanel

✓ Published0🌍 Public

Last edited Jan 5, 2019

Created on Jan 3, 2019

This example demonstrates how to create a custom, frameless floating panel with a vibrant, translucent background using the Sketch JavaScript API. The script creates an `NSPanel` with a titled, closable, and resizable window, and applies a `NSVisualEffectView` with a vibrant light appearance to achieve a frosted-glass effect. It uses `NSLayoutConstraint` objects to anchor the visual effect to the panel’s content view. The panel’s close button is handled via `setCOSJSTargetFunction`, which cleans up the panel reference and stops the script’s keep-alive loop.

AI-generated description

Similar vizzes

Loading thumbnail…

Trying to get NSPanel to expand downward.

A JavaScript sketch demonstrates an attempt to animate an NSPanel downward using the Sketch plugin API. The code creates a floating panel with a title bar and close button, initially sized at 312 by 210 pixels. After displaying the panel, it calls `setFrame_display_animate` to enlarge its height by 50 pixels. However, because the panel's origin remains unchanged, the animation expands the panel upward instead of downward. The commented-out alternative adjusts the y-origin by negative 50 pixels, which would shift the panel up to achieve the desired downward expansion. The sketch relies on `NSThread.mainThread().threadDictionary` for panel management and `NSMakeRect` for frame geometry.

KKevinGutowski

73% match

Loading thumbnail…

Gist 03ea367d00ac593217cf6770ee1cc539

This example demonstrates a Sketch plugin that launches a floating panel window with a table view interface. The code uses Sketch’s JavaScript API, `NSThread`, `NSPanel`, and `NSMakeRect` to construct a 312×210 pixel textured window, position it at the screen center, and set it to float above other windows. It manages a thread dictionary key to prevent duplicate panels, toggling the window open or closed on repeated plugin runs. The plugin calls `document.showMessage()` for user feedback and hides the miniaturize and zoom buttons via `standardWindowButton`, with the table view setup currently stubbed out.

KKevinGutowski

73% match

Loading thumbnail…

Basic Window Loading a URL

This example demonstrates a Sketch plugin that opens a floating panel and loads a remote SVG image from the Sketch website into a web view. The plugin uses AppKit’s `NSPanel` to create a borderless, floating window with hidden minimize and zoom buttons. It initializes a `WKWebView` from the WebKit framework, configures it with developer extras enabled, and loads the specified URL via `NSURLRequest`. The panel is centered and kept on top using `NSFloatingWindowLevel`.

KKevinGutowski

69% match

Loading thumbnail…

Replicating Sketch's Preview window

This example demonstrates a Sketch plugin that mirrors the application’s Preview window into a floating panel, replicating the live webview content. It uses Sketch’s JavaScript API, including `NSApplication`, `NSPanel`, and `NSThread`, to locate the Preview window, copy its webview configuration, and load the same URL into a new `MSMirrorWebView`. The panel is styled as a floating, closable window without minimize or zoom buttons, and the mirrored webview is added as its only subview. The code does not process data but directly clones an existing UI component.

KKevinGutowski

65% match

Loading thumbnail…

Testing how to animate a NSBox on the screen.

This example demonstrates how to animate a red NSBox across a macOS window using AppKit’s animation proxy. The code creates a floating NSPanel, configures it with a custom style mask, and disables the minimize and zoom buttons. An NSBox is added as a subview to the panel’s flipped content view, then its frame origin is moved via the `animator()` proxy to trigger a smooth animation. The implementation relies on `NSThread.mainThread().threadDictionary` to manage the panel’s lifecycle for repeat executions.

KKevinGutowski

63% match

Loading thumbnail…

Adding a view overlay on the Sketch canvas

This example uses the Sketch JavaScript API to add a fixed-size green view overlay onto the canvas of the currently selected document. The code retrieves the canvas placeholder view and its first subview, then creates an NSView with a green background and adds it as a subview. Layout constraints—using NSLayoutConstraint and relatedBy methods—anchor the overlay to the top-left corner and enforce fixed width and height values of 40 and 100 points, respectively.

KKevinGutowski

63% match

Loading thumbnail…

TableView start

This Sketch plugin example demonstrates a floating panel containing a table view with a custom data source. The panel is built using native Sketch APIs like `NSPanel`, `NSScrollView`, and `NSTableView`, and it populates the table through a dynamic delegate created with `MochaJSDelegate`, which intercepts selector-based callbacks to supply row and column values. The code sets up a single-column grid with alternating row colors, red grid lines, and a fixed height, and logs data requests to the console.

KKevinGutowski

62% match

Loading thumbnail…

Loading a XIB file in a Sketch plugin

This example demonstrates how a Sketch plugin loads a XIB file to create a native interface panel. The JavaScript entry point, `script.js`, uses the `sketch` module and attempts to run the plugin, catching errors to dynamically load the `HelloSketch` framework via Mocha’s `loadFrameworkWithName:inDirectory:` method. The Objective-C class `HSMain` then loads the `HSPanel` nib using `NSBundle loadNibNamed:owner:topLevelObjects:` and exposes a `helloText` method that logs and returns a greeting string, which is displayed through `sketch.UI.message`.

KKevinGutowski

62% match