KFrame
0.1.4indexedEnables UI previews inside simulated device frames within apps or design tools. Offers cross-platform support, customizable device frames, and design validation for multiple devices.
0
Stars
—
Used by
dependents
—
Health
/ 100
Enables UI previews inside simulated device frames within apps or design tools. Offers cross-platform support, customizable device frames, and design validation for multiple devices.
KFrame is a Kotlin Multiplatform library that lets you preview your UI inside simulated device frames—just like using an emulator, but directly inside your app or design tool. It supports Android, iOS, Desktop, and Web platforms, helping you visualize and refine your UI across multiple devices in one place.
Coming soon: Gradle setup instructions when published to Maven Central / GitHub Packages.
val device = buildGenericPhoneDevice(
platform = TargetPlatform.ANDROID,
id = "oneplus_8",
name = "OnePlus 8",
screenSize = Size(1080f, 2400f)
)
KFramePreview(device = device) {
// Your composable content here
}
| Device ID | Name | Type | Platform |
|---|---|---|---|
More coming soon!
You can also create your own device by using CustomPainter:
val myCustomDevice = DefaultDeviceInfo(
identifier = DeviceIdentifier(
platform = TargetPlatform.DESKTOP,
type = DeviceType.DESKTOP,
name = "my_custom_desktop"
),
name = "My Desktop",
screenSize = Size(1440f, 900f),
screenPath = myCustomPainter.createScreenPath(screenSize),
pixelRatio = 1.0f,
safeAreas = EdgeInsets.Zero,
framePainter = myCustomPainter,
frameSize = myCustomPainter.calculateFrameSize(screenSize)
)
Contributions are welcome! Feel free to open issues, submit PRs, or suggest features. Let's build a device library for everyone 🚀
MIT License © Estiven Sh
oneplus_8| OnePlus 8 |
| Phone |
| Android |
iphone_13 | iPhone 13 | Phone | iOS |
Surfaced from shared tags and platforms — no rankings paid for.